{"componentChunkName":"component---src-templates-post-js","path":"/blog/project-readme","webpackCompilationHash":"97000b66fda8dd565841","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"📒 项目说明怎么写 - Readme 的自我修养","tips":[],"categories":["code"],"datetime":"2019-09-10 20:06:21","noFooter":false,"description":"项目的门面，项目的第一眼，交接的核心，质量的基础，沉淀和总结的关键，写好一个 ReadMe 是一个程序员的基本要求。","plainTextDescription":"项目的门面，项目的第一眼，交接的核心，质量的基础，沉淀和总结的关键，写好一个 ReadMe 是一个程序员的基本要求。\n","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='92'%3e%3cpath%20d='M0%2015l1%2016v1L0%2061c0%2027%200%2029%202%2028l8-1-6%202c-4%202-4%202%2010%202l14-1%201-2c0-2-1-2-9-2-5%200-8%200-7-1v-3l-1-1c1-1%2022-2%2024%200s12%201%2026%200c7-1%207-2%206-4-1-1-1-1-3%201-1%201-2%201-2-2l-2-7c-2-2-2-4%201-5l1-3-1-2-2-1c-2-1-2-1%201-1%205%200%207-3%209-10%201-6%205-9%208-5%200%201%202%202%205%202%205%200%209%202%2014%207%204%204%204%204%202%203-3%200-3%202%200%205%201%202%206%203%205%201-1-1%201-5%202-5l3-2%204-2%204-2%205-3c3-1%204-3%201-2l-1-3%202-3v2l1%202%202%201c2%201%202%201%203-2%202-3%203-2%202%203%200%202%204%204%205%203l4-1%203-1%204-2%206-3c2-1%202-1%200-3h-4l-5-1c-2-1-5-2-6-1l-3-1-3-5-3-4%202-2%203-4%201-2v-3c0-2-1-2-2%202-2%204-2%204-3%202l4-10%204-9H0v15M298%201c0%202%202%209%205%2011%202%203%201%203-2%201s-4-3-5-1l-5-1c-3-2-4-2-5-1-3%204-3%205-4%203%200-2-2-1-6%202-7%204-13%2016-9%2018l1%205c1%204%203%206%203%203h1l5%202c3%200%204%200%204-2h1c2%203%203%202%202%200v-2l1-1v-3h5c-1%201%202%201%206%201l7%201h-15l5%202c5%201%205%201%202%201l-4%202c-1%202-1%204%201%204l2%202h4c0%201%201%202%203%202%202-1%204%200%204%201h3c0-3%203-1%204%201%200%202%200%202%202%201%201-1%201-1%201%201%200%204%203%205%206%202l5-1c5%201%206%202%203%202l-3%201h3c3%200%203%202%200%202-2%201-2%201%200%202l1%201%201%202%202%203c-1%200-5-2-4-3l-1-1c-1%201-5%200-7-3-2-2-3-1-3%202l2%202%201%202%201%201%204%202%203%201h2c0%202%202%201%202-1l1-2c2%200%201%206-1%207l-2%201h2l4%201%203%202%203%201%206%201c5%200%206%200%206-2s0-2%202-1l4%202c2%200%202%200%201%201s-1%201%201%201l3-1h1l1%201%201-2%201-3c1%200%205%203%204%204l-2-1-2-1%201%202%208%202%207%201-1%201c-5-1-23%200-23%201l7%201c7-1%209%200%204%201l-6%202-4%202h9c9%200%2010%200%2010-2l2-3c2-1%202-1%202%202l-1%203h8c7%200%207%200%207-2l-1-3v-1l1-44V0h-51l-51%201M19%2045c-2%202-2%202-3%201-2-3-4-2-4%202%200%202%200%202%205%202%207%201%2011%202%2014%207l4%203v2l1%202v1l1-2h8l4-1c4-1%204-3%200-4l-3-2%202-2c4-3%204-4%201-3l-3-1-1-1-2%201c0%202-2%201-3-1l-1-1-1%202c1%201-1%202-2%200h-1l-1-1-1-1-3-2c-4-4-8-5-11-1'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/0979f/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/9e575/banner.jpg 500w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/79449/banner.jpg 1000w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/0979f/banner.jpg 1920w","srcWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/14e3c/banner.webp","srcSetWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/7fe04/banner.webp 500w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/d619e/banner.webp 1000w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/14e3c/banner.webp 1920w","sizes":"(max-width: 1920px) 100vw, 1920px"}}},"bannerCredit":null,"slug":"/blog/project-readme","tags":["技巧","最佳实践","协作"]},"headings":[{"value":"1. 咋想的","depth":2},{"value":"2. 别人家的","depth":2},{"value":"3. 我们要达成的目的","depth":2},{"value":"4. 团队中的标准","depth":2},{"value":"5. 一个简单的示例","depth":2}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"project-readme\",\n \"title\": \"📒 项目说明怎么写 - Readme 的自我修养\",\n \"date\": \"2019-09-10 20:06:21\",\n \"author\": \"Ubug\",\n \"description\": \"项目的门面，项目的第一眼，交接的核心，质量的基础，沉淀和总结的关键，写好一个 ReadMe 是一个程序员的基本要求。\",\n \"categories\": [\"code\"],\n \"tags\": [\"技巧\", \"最佳实践\", \"协作\"],\n \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u81EA\\u5DF1\\u5728\\u56E2\\u961F\\u5185\\u63A8\\u884C\\u7684\\u4E00\\u4E2A\\u9879\\u76EE\\u8BF4\\u660E\\uFF0C\\u5C24\\u5176\\u662F\\u591A\\u9879\\u76EE\\u5207\\u6362\\u548C\\u591A\\u4EBA\\u534F\\u4F5C\\u7684\\u5DE5\\u4F5C\\u73AF\\u5883\\u3002\")), mdx(\"hr\", null), mdx(\"h2\", null, \"1. \\u548B\\u60F3\\u7684\"), mdx(\"p\", null, \"\\u9879\\u76EE\\u7684\\u58F0\\u660E\\u5468\\u671F\\u5305\\u62EC\\u521D\\u59CB\\u5316\\u3001\\u5F00\\u53D1\\u3001\\u8FED\\u4EE3\\u3001\\u90E8\\u7F72\\u3001\\u4EA4\\u63A5\\u7B49\\uFF0C\\u4E00\\u4E2A\\u7EF4\\u62A4\\u826F\\u597D\\u7684\\u9879\\u76EE\\u7684\\u8FD9\\u4E9B\\u6D41\\u7A0B\\u4E0D\\u53EF\\u80FD\\u968F\\u610F\\u6DF7\\u4E71\\u3002\\u5728 git \\u4ED3\\u5E93\\u6258\\u7BA1\\u5927\\u90E8\\u5206\\u9879\\u76EE\\u7684\\u80CC\\u666F\\u4E0B\\uFF0Creadme \\u4E00\\u822C\\u4F5C\\u4E3A\\u4E00\\u4E2A work board \\u89D2\\u8272\\uFF0C\\u6807\\u8BB0\\u6BCF\\u4E2A\\u91CD\\u8981\\u7684\\u8BF4\\u660E\\u3002\\u4ECE\\u6211\\u76EE\\u524D\\u7684\\u5DE5\\u4F5C\\u4E2D\\uFF0C\\u804A\\u804A\\u600E\\u4E48\\u624D\\u80FD\\u8F83\\u597D\\u7684\\u7EF4\\u62A4\\u4E00\\u4EFD\\u4EA7\\u54C1\\u6587\\u6863\\uFF0C\\u4E0D\\u81F3\\u4E8E\\u5FEB\\u901F\\u4E0A\\u624B\\u4E24\\u5E74\\u524D\\u7684\\u8001\\u65E7\\u670D\\u52A1\\uFF0C\\u4E0D\\u81F3\\u4E8E\\u79BB\\u804C\\u4E00\\u5468\\u641E\\u4E0D\\u5B9A\\u4EA4\\u63A5\\u3002\"), mdx(\"p\", null, \"\\u4E00\\u4E2A\\u4EA7\\u54C1\\u6587\\u6863\\u7684\\u8BE6\\u7EC6\\u7A0B\\u5EA6\\u4E0E\\u590D\\u6742\\u7A0B\\u5EA6\\u3001\\u6D89\\u53CA\\u4EBA\\u6570\\u3001\\u91CD\\u8981\\u6027\\u3001\\u76F8\\u5173\\u8054\\u5EA6\\u6709\\u5173\\u7CFB\\uFF0C\\u7B80\\u5355\\u7684\\u4E00\\u4E2A\\u9879\\u76EE\\u4E5F\\u4E0D\\u9700\\u8981\\u957F\\u7BC7\\u7D2F\\u724D\\u7684\\u8BF4\\u4E2A\\u6CA1\\u5B8C\\uFF0C\\u5B9E\\u73B0\\u548C\\u903B\\u8F91\\u90FD\\u653E\\u5230\\u4EE3\\u7801\\u91CC\\uFF0C\\u6587\\u6863\\u662F\\u4F5C\\u4E3A\\u4E00\\u4E2A\\u8BF4\\u660E\\u4E66\\u5B58\\u5728\\u3002\"), mdx(\"h2\", null, \"2. \\u522B\\u4EBA\\u5BB6\\u7684\"), mdx(\"p\", null, \"GitHub \\u4E0A\\u7684\\u5F00\\u6E90\\u9879\\u76EE\\u6839\\u636E\\u4E0D\\u540C\\u7684\\u7528\\u9014\\uFF0C\\u4E00\\u822C\\u6709\\u662F\\u4EC0\\u4E48\\u548C\\u600E\\u4E48\\u7528\\u7684\\u5206\\u7C7B\\uFF0C\\u5305\\u62EC\\u7B80\\u5355\\u4ECB\\u7ECD\\u3001Features\\u3001Usage(Get Started)\\u3001Demo\\u3001ChangeLog\\u3001License\"), mdx(\"p\", null, \"\\u5176\\u4E2D get started \\u6709\\u7684\\u662F\\u600E\\u4E48\\u7528\\u63A5\\u53E3\\uFF0C\\u6709\\u7684\\u662F\\u600E\\u4E48\\u5728\\u6B64\\u57FA\\u7840\\u5F00\\u53D1\\u3002\\u5F53\\u7136\\u6211\\u4EEC\\u81EA\\u5DF1\\u7684\\u9879\\u76EE\\u548C\\u8FD9\\u4E9B\\u5F00\\u653E\\u7684\\u9879\\u76EE\\u4E0D\\u540C\\uFF0C\\u4F46\\u662F\\u4E5F\\u662F\\u80FD\\u501F\\u9274\\u4E0B\\u3002\"), mdx(\"h2\", null, \"3. \\u6211\\u4EEC\\u8981\\u8FBE\\u6210\\u7684\\u76EE\\u7684\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u5199\\u8FD9\\u4E2A\\u6587\\u6863\\u7684\\u76EE\\u7684\\u5176\\u5B9E\\u8BF4\\u767D\\u4E86\\u662F\\u9762\\u5411\\u79BB\\u804C\\u7F16\\u7A0B\\uFF0C\\u522B\\u4EBA\\u751A\\u81F3\\u81EA\\u5DF1\\u770B\\u5230\\u8FD9\\u4E2A\\u6587\\u6863\\u90FD\\u4E0D\\u9700\\u8981\\u6307\\u5BFC\\u5C31\\u80FD\\u5F88\\u597D\\u7684\\u4EA4\\u63A5\\uFF0C\\u5F53\\u7136\\u8FD9\\u4E2A\\u4E1C\\u897F\\u662F\\u8BA9\\u8D1F\\u8D23\\u534F\\u4F5C\\u7684\\u5C0F\\u4F19\\u4F34\\u3001\\u540E\\u7EED\\u7EF4\\u62A4\\u7684\\u5C0F\\u4F19\\u4F34\\u3001\\u90E8\\u7F72\\u5230\\u7EBF\\u4E0A\\u7684\\u5C0F\\u4F19\\u4F34\\u90FD\\u80FD\\u8212\\u5FC3\\u7684\\uFF0C\\u4E0D\\u591A\\u7684\\u6587\\u5B57\\u5C31\\u80FD\\u7701\\u4E0B\\u5F88\\u591A\\u53E3\\u820C\\u4E4B\\u4E89\\u3002\"), mdx(\"p\", null, \"\\u5177\\u4F53\\u8981\\u4ECB\\u7ECD\\u7684\\u4E1C\\u897F\\u6709\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u9879\\u76EE\\u662F\\u5E72\\u561B\\u7684\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u4E3A\\u4EC0\\u4E48\\u5F00\\u8FD9\\u4E2A\\u9879\\u76EE\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u9879\\u76EE\\u53C2\\u8003\\u7684\\u5177\\u4F53\\u6587\\u6863\\u548C\\u9700\\u6C42\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u600E\\u4E48\\u624D\\u80FD\\u8BA9\\u9879\\u76EE\\u5B89\\u5168\\u8DD1\\u8D77\\u6765\\u3001\\u505C\\u4E0B\\u6765\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u9700\\u8981\\u4F9D\\u8D56\\u54EA\\u4E9B\\u5176\\u4ED6\\u670D\\u52A1\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u600E\\u4E48\\u624D\\u80FD\\u672C\\u5730\\u8C03\\u8BD5\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u9879\\u76EE\\u7684\\u57FA\\u672C\\u76EE\\u5F55\\u548C\\u67B6\\u6784\\u8BF4\\u660E\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u6CE8\\u610F\\u4E8B\\u9879\\u548C\\u4E00\\u822C\\u5F02\\u5E38\\u8BF4\\u660E\")), mdx(\"p\", null, \"\\u505A\\u5230\\u4E0A\\u9762\\u7684\\u6761\\u76EE\\uFF0C\\u57FA\\u672C\\u4E0A\\u4E5F\\u80FD\\u5927\\u81F4\\u660E\\u767D\\u9879\\u76EE\\u7684\\u6574\\u4F53\\u4E86\\u3002\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5F00\\u53D1\\u73AF\\u5883\\u3001\\u4F9D\\u8D56\\u51C6\\u5907\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5F00\\u53D1\\u542F\\u52A8\\u3001\\u9884\\u89C8\\u3001\\u8C03\\u8BD5\\u6B65\\u9AA4\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u6280\\u672F\\u9009\\u578B\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u6838\\u5FC3\\u4EE3\\u7801\\u529F\\u80FD\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u9879\\u76EE\\u76EE\\u5F55\\u7ED3\\u6784\\u548C\\u91CD\\u70B9\\u6587\\u4EF6\\u8BF4\\u660E\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5F00\\u53D1\\u6CE8\\u610F\\u4E8B\\u9879\")), mdx(\"p\", null, \"\\u4E0A\\u9762\\u8FD9\\u4E9B\\u8BE6\\u7EC6\\u7684\\u4ECE\\u96F6\\u5F00\\u59CB\\u5F00\\u53D1\\u6B65\\u9AA4\\uFF0C\\u65B9\\u4FBF\\u81EA\\u5DF1\\u8FC1\\u79FB\\u3001\\u518D\\u7EF4\\u62A4\\uFF0C\\u65B9\\u4FBF\\u522B\\u4EBA\\u63A5\\u624B\\u9879\\u76EE\\u3002\\u5C24\\u5176\\u662F\\u4F9D\\u8D56\\u5F88\\u591A\\u524D\\u671F\\u4F9D\\u8D56\\u51C6\\u5907\\u7684\\u5F00\\u53D1\\u6A21\\u5F0F\\uFF0C\\u6BD4\\u5982\\u4E00\\u4E2A\\u6838\\u5FC3\\u529F\\u80FD\\uFF0C\\u9700\\u8981\\u672C\\u5730\\u989D\\u5916\\u542F\\u52A8\\u591A\\u4E2A mock \\u6570\\u636E\\u5E93\\u3001mock \\u63A5\\u53E3\\u3001\\u914D\\u7F6E\\u8C03\\u8BD5\\u73AF\\u5883\\u7B49\\uFF0C\\u8FD9\\u4E2A\\u65F6\\u5019\\u4E00\\u4E2A command list \\u771F\\u7684\\u4F1A\\u5C06\\u51C6\\u5907\\u65F6\\u95F4\\u4ECE\\u4E00\\u4E2A\\u5C0F\\u65F6\\u8FD8\\u4E0D\\u77E5\\u9053\\u6709\\u6CA1\\u6709\\u5B8C\\u6574\\u7F29\\u51CF\\u5230 5 \\u5206\\u949F\\u51C6\\u5907\\u5B8C\\u6BD5\\u3002\\uFF08PS\\uFF1A\\u5176\\u5B9E\\u5982\\u679C\\u65E5\\u5E38\\u5F00\\u53D1\\u9700\\u8981\\u8FD9\\u4E48\\u4E9B\\u914D\\u5957 server \\u542F\\u52A8\\uFF0C\\u9700\\u8981\\u624B\\u52A8\\u5F00\\u53D1\\u4E00\\u4E2A\\u547D\\u4EE4\\u884C\\u4E4B\\u7C7B\\u7684\\u5DE5\\u5177\\u4F5C\\u4E3A\\u811A\\u624B\\u67B6\\u6765\\u7F29\\u51CF\\u5230 1 \\u5206\\u949F\\u65F6\\u95F4\\u3002\\uFF09\"), mdx(\"h2\", null, \"4. \\u56E2\\u961F\\u4E2D\\u7684\\u6807\\u51C6\"), mdx(\"p\", null, \"\\u9879\\u76EE\\u6587\\u6863\\u5982\\u679C\\u8131\\u79BB\\u4E86\\u56E2\\u961F\\u7684\\u73AF\\u5883\\u4E5F\\u6CA1\\u4EC0\\u4E48\\u610F\\u4E49\\uFF0C\\u6240\\u4EE5\\u56E2\\u961F\\u600E\\u4E48\\u7EF4\\u62A4\\u9879\\u76EE\\u7684\\uFF0C\\u8001\\u9879\\u76EE\\u600E\\u4E48\\u5FEB\\u901F\\u4E0A\\u624B\\uFF0C\\u6BCF\\u4E2A\\u9879\\u76EE\\u600E\\u4E48\\u90E8\\u7F72\\u3001\\u5F00\\u53D1\\u90FD\\u662F\\u6709\\u4E00\\u4E2A\\u901A\\u7528\\u6280\\u672F\\u6808\\u7684\\uFF0C\\u5E76\\u4E0D\\u5B58\\u5728\\u4E00\\u4E2A\\u6807\\u51C6\\u7684\\u6A21\\u7248\\u6587\\u6863\\uFF0C\\u5C24\\u5176\\u662F\\u9879\\u76EE\\u5FEB\\u901F\\u8FED\\u4EE3\\uFF0C\\u6587\\u6863\\u7684\\u7EF4\\u62A4\\u5F88\\u591A\\u65F6\\u5019\\u4E5F\\u662F\\u529B\\u4E0D\\u4ECE\\u5FC3\\u3002\\u5C24\\u5176\\u9879\\u76EE\\u8D76\\u5DE5\\u3001\\u56E2\\u961F\\u5F88\\u5C0F\\u3001\\u6280\\u672F\\u6808\\u7B80\\u5355\\u7684\\u60C5\\u51B5\\uFF0C\\u6587\\u6863\\u4E5F\\u5E76\\u4E0D\\u662F\\u975E\\u8981\\u4E8B\\u65E0\\u5DE8\\u7EC6\\u3002\"), mdx(\"p\", null, \"\\u4EB2\\u8EAB\\u4F53\\u4F1A\\u4E00\\u4E2A\\u5C0F\\u516C\\u53F8\\uFF0C\\u4ECE\\u7B80\\u5355\\u53E3\\u5934\\u4EA4\\u63A5\\u5373\\u53EF\\uFF0C\\u5230\\u753B\\u5230\\u767D\\u677F\\u4E0A\\u624D\\u80FD\\u8BF4\\u6E05\\u5168\\u90E8\\u670D\\u52A1\\uFF0C\\u6700\\u540E\\u5168\\u90FD\\u6807\\u51C6\\u5316\\u5230\\u6587\\u6863\\u7684\\u4E00\\u4E2A\\u8FC7\\u7A0B\\u3002\"), mdx(\"h2\", null, \"5. \\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u793A\\u4F8B\"), mdx(\"p\", null, \"\\u4E0B\\u9762\\u662F\\u5C0F\\u56E2\\u961F\\u4E4B\\u95F4\\uFF0C\\u5185\\u90E8\\u9879\\u76EE\\u8F83\\u591A\\u7684\\u60C5\\u51B5\\u4E0B\\u7684\\u4E00\\u4E2A\\u793A\\u4F8B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-md\"\n }, \"----\\n\\n# \\u9879\\u76EE\\u540D\\u79F0\\n\\n> \\u9879\\u76EE\\u529F\\u80FD\\u7B80\\u4ECB\\u3002\\uFF08\\u8BF4\\u660E\\uFF1A\\u7528\\u7CBE\\u7B80\\u7684\\u6587\\u5B57\\u63CF\\u8FF0\\u672C\\u9879\\u76EE\\u76EE\\u524D\\u7248\\u672C\\u3001\\u4E3B\\u8981\\u529F\\u80FD\\u3001\\u90E8\\u7F72\\u4F4D\\u7F6E\\u3001\\u76EE\\u524D\\u7EF4\\u62A4\\u4EBA\\u5458\\u7B49\\uFF09\\n\\n[TOC] \\uFF08\\u8BF4\\u660E\\uFF1A\\u6587\\u6863\\u7684\\u76EE\\u5F55\\u3002\\u8F83\\u957F\\u7684\\u6587\\u6863\\u6700\\u597D\\u589E\\u52A0\\u6587\\u6863\\u7D22\\u5F15\\u76EE\\u5F55\\uFF09\\n\\n----\\n\\n## 1. \\u80CC\\u666F\\n\\n### 1.1 \\u9879\\u76EE\\u7684\\u5F00\\u53D1\\u80CC\\u666F\\n\\nxx\\n\\n### 1.2 \\u9700\\u8981\\u89E3\\u51B3\\u7684\\u95EE\\u9898\\n\\nxx\\n\\n### 1.3 \\u4EA7\\u54C1\\u6587\\u6863\\u4F4D\\u7F6E(GIT)\\n\\nxx\\n\\n### 1.4 \\u4E3B\\u8981\\u53C2\\u8003\\u63A5\\u53E3\\u6587\\u6863\\u4F4D\\u7F6E(GIT)\\n\\nxx\\n\\n\\uFF08\\u4EE5\\u4E0A\\u9009\\u5199\\uFF09\\n\\n----\\n\\n## 2. \\u5B89\\u88C5/\\u90E8\\u7F72\\u8BF4\\u660E\\n\\n\\u673A\\u5668\\u7C7B\\u578B\\u3001\\u670D\\u52A1\\u7C7B\\u578B\\u3001\\u5DE5\\u4F5C\\u6A21\\u5F0F\\n\\n\\uFF08\\u4ECE\\u5E72\\u51C0\\u7684\\u670D\\u52A1\\u5668\\u673A\\u5668\\uFF0C\\u5230\\u80FD\\u6B63\\u5E38\\u8FD0\\u884C\\u670D\\u52A1\\u7684\\u5168\\u90E8\\u73AF\\u5883\\u5B89\\u88C5\\u548C\\u914D\\u7F6E\\uFF0C\\u5305\\u62EC\\u4EE3\\u7801\\u66F4\\u65B0\\u3001\\u542F\\u52A8\\u505C\\u6B62\\u3001\\u65E5\\u5FD7\\u4FDD\\u5B58\\uFF09\\n\\n### 2.1 \\u5B89\\u88C5\\u673A\\u5668\\n\\nxx\\n\\n### 2.2 \\u73AF\\u5883\\u51C6\\u5907\\n\\nxx\\n\\n### 2.3 \\u4EE3\\u7801\\u90E8\\u7F72\\n\\nxx\\n\\n### 2.4 \\u670D\\u52A1\\u542F\\u52A8/\\u505C\\u6B62/\\u81EA\\u542F\\u52A8\\n\\nxx\\n\\n### 2.5 \\u6CE8\\u610F\\u4E8B\\u9879/tips\\n\\nxx\\n\\n----\\n\\n## 3. \\u5F00\\u53D1\\u8BF4\\u660E\\n\\n### 3.1 \\u521D\\u59CB\\u5316\\u4EE3\\u7801\\u4ED3\\u5E93\\n\\ngit clone gitlaburl libname\\n\\n### 3.2 \\u6280\\u672F\\u9009\\u578B\\n\\n\\u4F7F\\u7528\\u4E86\\u4EC0\\u4E48\\u6846\\u67B6\\uFF0C\\u67B6\\u6784\\u7B49\\n\\n### 3.3 \\u672C\\u5730\\u73AF\\u5883\\n\\n\\uFF08\\u4ECE\\u5E72\\u51C0\\u7684\\u5F00\\u53D1\\u673A\\u5668\\uFF0C\\u5230\\u80FD\\u6B63\\u5E38\\u8FDB\\u884C\\u5F00\\u53D1\\u7684\\u5168\\u90E8\\u73AF\\u5883\\u5B89\\u88C5\\u548C\\u914D\\u7F6E\\uFF0C\\u65B9\\u4FBF\\u5DE5\\u4F5C\\u8F6C\\u79FB\\u4EA4\\u63A5\\uFF09\\n\\n\\u8F6F\\u4EF6/\\u76F8\\u5173\\u914D\\u7F6E/\\u5F00\\u53D1\\u9884\\u89C8\\n\\n\\u5176\\u4ED6\\u8BF4\\u660E\\n\\n### 3.4 \\u5EFA\\u8BAE\\u5F00\\u53D1\\u6B65\\u9AA4\\n\\n\\u5728\\u90A3\\u4E2A\\u6587\\u4EF6\\u5939\\u4E0B\\u6267\\u884C\\u4EC0\\u4E48\\u547D\\u4EE4\\uFF0C\\u5230\\u4EC0\\u4E48\\u9875\\u9762\\u9884\\u89C8\\u6548\\u679C\\uFF1B\\n\\u5F00\\u53D1\\u4EC0\\u4E48\\u5DE5\\u5177\\u80FD\\u65B9\\u4FBF\\u5F00\\u53D1\\n\\n----\\n\\n## 4. \\u672C\\u5730\\u76EE\\u5F55\\n\\n\\u76EE\\u5F55\\u7ED3\\u6784\\u4ECB\\u7ECD\\n\\n## 5. \\u5176\\u4ED6\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"b2489d99-bfb6-5e9d-9c98-ed300a0c0954","prev":{"fileAbsolutePath":"E:/u-codes/storybok/content/blog/react-hooks-vs-class/react-hooks-vs-class.md","id":"fe931a50-c0ee-5ec7-a41f-be837a3aad8c","parent":{"name":"react-hooks-vs-class","sourceInstanceName":"blog"},"excerpt":"想分享的是对 React-Hooks 这个新功能的思考，不仅仅是新的接口，重要的是这种开发模式代表的逻辑的拆分，状态和副作用的思维方式，而不是生命周期~~ Hooks 概念刚出来的时候就看了发布会的 Presentation，当时感觉思想特别好，能够在一个函数里面就可以对数据和生命周期进行管理。 而且对于从 prototype 过来的原型继承，一直觉得虽然 Class 很好用，但是太重量了，一个很简单的组件只要涉及到内部状态就要有 Class，所以 Hooks…","fields":{"title":"⚓ React Hooks 理解","slug":"/blog/react-hooks-vs-class","description":"hooks 的思想是开发者不再需要去理清每一个生命周期函数的触发时机，以及在里面处理逻辑会有哪些影响。而是更关注去思考哪些是状态，哪些是副作用，哪些是需要缓存的复杂计算和不必要的渲染。class 更偏向的是清晰完整的生命周期，一个经典的面向对象思想，强调的是方法和属性。","date":"2019-09-18","redirects":null,"datetime":"2019-09-18 20:24:36","categories":["code"],"series":null,"tags":["react","hooks","技巧","思考","功能"],"status":"online"},"frontmatter":{"published":null,"tags":["react","hooks","技巧","思考","功能"],"theme":null,"slug":"react-hooks-vs-class","date":"2019-09-18 20:24:36"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst View = () => {\n let [count, setCount] = React.useState(0);\n return mdx(\"button\", {\n onClick: () => setCount(count + 1)\n }, \"\\u70B9\\u6211\\uFF1A\", count);\n};\nfunction Counter() {\n const [count, setCount] = useState(0);\n useEffect(() => {\n const id = setInterval(() => {\n setCount(count + 1); // This effect depends on the `count` state\n }, 1000);\n return () => clearInterval(id);\n }, []); // 🔴 Bug: `count` is not specified as a dependency\n return mdx(\"div\", null, count);\n}\nconst _frontmatter = {\n \"slug\": \"react-hooks-vs-class\",\n \"title\": \"⚓ React Hooks 理解\",\n \"date\": \"2019-09-18 20:24:36\",\n \"author\": \"Ubug\",\n \"description\": \"hooks 的思想是开发者不再需要去理清每一个生命周期函数的触发时机，以及在里面处理逻辑会有哪些影响。而是更关注去思考哪些是状态，哪些是副作用，哪些是需要缓存的复杂计算和不必要的渲染。class 更偏向的是清晰完整的生命周期，一个经典的面向对象思想，强调的是方法和属性。\",\n \"categories\": [\"code\"],\n \"tags\": [\"react\", \"hooks\", \"技巧\", \"思考\", \"功能\"],\n \"banner\": \"./banner.jpg\",\n \"bannerCredit\": \"Banner from [React Hooks](https://www.framer.com/blog/posts/react-hooks/)\",\n \"tips\": [\"原来 Hooks 这么特别啊！\", \"我们不一样，每个用法都有不同的场景。\"]\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst CodeWithPreview = makeShortcode(\"CodeWithPreview\");\nconst layoutProps = {\n View,\n Counter,\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u5BF9 React-Hooks \\u8FD9\\u4E2A\\u65B0\\u529F\\u80FD\\u7684\\u601D\\u8003\\uFF0C\\u4E0D\\u4EC5\\u4EC5\\u662F\\u65B0\\u7684\\u63A5\\u53E3\\uFF0C\\u91CD\\u8981\\u7684\\u662F\\u8FD9\\u79CD\\u5F00\\u53D1\\u6A21\\u5F0F\\u4EE3\\u8868\\u7684\\u903B\\u8F91\\u7684\\u62C6\\u5206\\uFF0C\\u72B6\\u6001\\u548C\\u526F\\u4F5C\\u7528\\u7684\\u601D\\u7EF4\\u65B9\\u5F0F\\uFF0C\\u800C\\u4E0D\\u662F\\u751F\\u547D\\u5468\\u671F~~\")), mdx(\"hr\", null), mdx(\"p\", null, \"Hooks \\u6982\\u5FF5\\u521A\\u51FA\\u6765\\u7684\\u65F6\\u5019\\u5C31\\u770B\\u4E86\\u53D1\\u5E03\\u4F1A\\u7684 Presentation\\uFF0C\\u5F53\\u65F6\\u611F\\u89C9\\u601D\\u60F3\\u7279\\u522B\\u597D\\uFF0C\\u80FD\\u591F\\u5728\\u4E00\\u4E2A\\u51FD\\u6570\\u91CC\\u9762\\u5C31\\u53EF\\u4EE5\\u5BF9\\u6570\\u636E\\u548C\\u751F\\u547D\\u5468\\u671F\\u8FDB\\u884C\\u7BA1\\u7406\\u3002\"), mdx(\"p\", null, \"\\u800C\\u4E14\\u5BF9\\u4E8E\\u4ECE prototype \\u8FC7\\u6765\\u7684\\u539F\\u578B\\u7EE7\\u627F\\uFF0C\\u4E00\\u76F4\\u89C9\\u5F97\\u867D\\u7136 Class \\u5F88\\u597D\\u7528\\uFF0C\\u4F46\\u662F\\u592A\\u91CD\\u91CF\\u4E86\\uFF0C\\u4E00\\u4E2A\\u5F88\\u7B80\\u5355\\u7684\\u7EC4\\u4EF6\\u53EA\\u8981\\u6D89\\u53CA\\u5230\\u5185\\u90E8\\u72B6\\u6001\\u5C31\\u8981\\u6709 Class\\uFF0C\\u6240\\u4EE5 Hooks \\u53D1\\u5E03\\u4E4B\\u540E\\u5F88\\u957F\\u4E00\\u6BB5\\u65F6\\u95F4\\u6211\\u90FD\\u662F\\u4EE5\\u4E3A\\u8981\\u66FF\\u4EE3 Class \\u7EC4\\u4EF6\\uFF0C\\u81F3\\u5C11\\u5927\\u90E8\\u5206\\u573A\\u666F\\u53EF\\u4EE5\\u7528 Hooks \\u91CD\\u5199\\u3002\"), mdx(\"p\", null, \"\\u5728\\u4F7F\\u7528\\u4E86\\u4E24\\u4E09\\u4E2A\\u6708\\u4E4B\\u540E\\uFF0C\\u4E0D\\u7528 Hooks \\u4E0D\\u8212\\u670D\\u65AF\\u57FA\\u4E5F\\u8E29\\u4E86\\u5F88\\u591A\\u5751\\uFF0C\\u6211\\u73B0\\u5728\\u624D\\u987F\\u609F\\u8FC7\\u6765\\uFF0C\\u5176\\u5B9E Hooks \\u4E0D\\u4EC5\\u4EC5\\u662F\\u770B\\u4E0A\\u53BB\\u8FD9\\u4E48\\u7B80\\u5355\\uFF0C\\u4E5F\\u4E0D\\u662F\\u4EC5\\u4EC5\\u7528\\u6765\\u53D6\\u4EE3 Class \\u7684\\uFF0C\\u800C\\u662F\\u4E00\\u4E2A\\u4E0D\\u4E00\\u6837\\u7684\\u7EC4\\u4EF6\\u601D\\u60F3\\u3002\"), mdx(\"h2\", null, \"0. \\u6CA1\\u6709 Hooks \\u7684\\u65E5\\u5B50\\u91CC\"), mdx(\"p\", null, \"\\u6211\\u60F3\\u8981\\u5F00\\u53D1\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u5173\\u6CE8\\u7EC4\\u4EF6\"), mdx(\"style\", null, styleStr), mdx(CodeWithPreview, {\n codes: [{\n lang: 'jsx',\n code: code1\n }, {\n lang: 'jsx',\n code: \"\\n\\n\"\n }, {\n lang: 'css',\n code: \"/* === css style === */\"\n }],\n withTitle: true,\n preview: mdx(\"div\", null, mdx(Follow, {\n followed: true,\n mdxType: \"Follow\"\n }), mdx(\"br\", null), mdx(Follow, {\n followed: false,\n mdxType: \"Follow\"\n })),\n mdxType: \"CodeWithPreview\"\n }), mdx(\"p\", null, \"\\u8FD9\\u6837\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u4E0D\\u53EF\\u80FD\\u662F\\u7B80\\u5355\\u7684\\u5C55\\u793A\\uFF0C\\u5FC5\\u5B9A\\u9700\\u8981\\u4E00\\u4E9B\\u4EA4\\u4E92\\uFF0C\\u4F46\\u662F props \\u7684\\u5355\\u5411\\u66F4\\u65B0\\u6CA1\\u529E\\u6CD5\\u5B9E\\u73B0\\u7075\\u6D3B\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\uFF0C\\u6240\\u4EE5\\u5FC5\\u987B\\u8981\\u5C06\\u8FD9\\u4E2A\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\u6539\\u6210 class \\u7684\\uFF0C\\u540C\\u65F6\\u8003\\u8651\\u5230\\u4E1A\\u52A1\\u590D\\u6742\\u6027\\uFF0C\\u6DFB\\u52A0\\u4E86\\u6570\\u636E\\u7684\\u521D\\u59CB\\u5316\\u3001\\u8BA2\\u9605\\u3001\\u66F4\\u65B0\\u7B49\\u751F\\u547D\\u5468\\u671F\\u7B49\\uFF0C\\u6700\\u7EC8\\u5B9E\\u73B0\\uFF1A\"), mdx(Demo2, {\n mdxType: \"Demo2\"\n }), mdx(\"p\", null, \"\\u73B0\\u5728\\u6211\\u4EEC\\u5C31\\u6709\\u4E00\\u4E2A\\u53EF\\u4EA4\\u4E92\\u7EC4\\u4EF6\\u4E86\\uFF0C\\u903B\\u8F91\\u7B97\\u662F\\u5F88\\u6E05\\u6670\\u3002\\u4E5F\\u5F88\\u660E\\u663E\\u7684\\u5F97\\u51FA\\u7ED3\\u8BBA\\uFF0C\\u5982\\u679C\\u9700\\u8981\\u5185\\u5BB9\\u5C55\\u793A\\uFF0C\\u4F7F\\u7528\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\uFF0C\\u5982\\u679C\\u60F3\\u8981\\u4EA4\\u4E92\\uFF0C\\u5C31\\u5FC5\\u987B\\u6539\\u5199\\u6210\\u4E00\\u4E2A class \\u7EC4\\u4EF6\\u3002\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"function \\u7EC4\\u4EF6\\u7B80\\u5355\\u7EAF\\u7CB9\\uFF0C\\u53EA\\u6709\\u4E00\\u4E2A\\u8F93\\u5165\\u8F93\\u51FA\\uFF0C\\u65E0\\u72B6\\u6001\\u7684\\u5F00\\u53D1\\u6A21\\u5F0F\\uFF0C\\u786E\\u5B9A\\u7684\\u8F93\\u5165\\u4E00\\u5B9A\\u6709\\u786E\\u5B9A\\u7684\\u8F93\\u51FA\\uFF0C\\u5F53\\u65F6\\u4E5F\\u88AB\\u79F0\\u4E3A SFC\\uFF08stateless functional component\\uFF09\\u3002\\u6240\\u4EE5\\u4E0A\\u9762\\u7684\\u4F8B\\u5B50\\u5982\\u679C\\u4F7F\\u7528\\u51FD\\u6570\\u5F0F\\uFF0C\\u9664\\u975E\\u7236\\u7EC4\\u4EF6\\u6539\\u53D8\\u8F93\\u5165\\uFF0C\\u5426\\u5219\\u4E00\\u5B9A\\u6CA1\\u529E\\u6CD5\\u5B9E\\u73B0\\u754C\\u9762\\u6539\\u53D8\\u3002\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"class \\u7684\\u7EC4\\u4EF6\\u6709\\u81EA\\u5DF1\\u7684\\u751F\\u547D\\u5468\\u671F\\uFF0C\\u53EF\\u4EE5\\u7EF4\\u62A4\\u81EA\\u5DF1\\u7684\\u72B6\\u6001\\uFF0C\\u7236\\u7EC4\\u4EF6\\u7684\\u8F93\\u5165\\u65E0\\u6CD5\\u552F\\u4E00\\u786E\\u5B9A\\u7EC4\\u4EF6\\u7684\\u7ED3\\u679C\\uFF0C\\u7EC4\\u4EF6\\u7684\\u529F\\u80FD\\u66F4\\u72EC\\u7ACB\\u7075\\u6D3B\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u72B6\\u6001\\u3001\\u65B9\\u6CD5\\u548C\\u4E8B\\u4EF6\\u6765\\u5B8C\\u6210\\u7528\\u6237\\u7684\\u4EA4\\u4E92\\uFF0C\\u5BF9\\u4E8E\\u7236\\u7EC4\\u4EF6\\u5185\\u90E8\\u903B\\u8F91\\u90FD\\u662F\\u9ED1\\u76D2\\u3002\"))), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u5C31\\u662F React \\u5F00\\u53D1\\u8005\\u5728\\u4E00\\u6BB5\\u65F6\\u95F4\\u540E\\u90FD\\u4F1A\\u6709\\u7684\\u601D\\u8003\\u3002\"), mdx(\"h2\", null, \"1. \\u6570\\u636E\\u3001\\u72B6\\u6001\\u3001\\u5BB9\\u5668\\u7EC4\\u4EF6 VS \\u6E32\\u67D3\\u3001\\u6837\\u5F0F\\u3001\\u5C55\\u793A\\u7EC4\\u4EF6\"), mdx(\"p\", null, \"\\u51E0\\u4E4E\\u6240\\u6709\\u7684\\u6700\\u4F73\\u5B9E\\u8DF5\\u90FD\\u5728\\u8BF4\\u7EC4\\u4EF6\\u4E0A\\u9700\\u8981\\u6709\\u660E\\u786E\\u7684\\u72B6\\u6001\\u548C\\u5E72\\u51C0\\u7684\\u6E32\\u67D3\\uFF0C\\u6570\\u636E\\u548C\\u6E32\\u67D3\\u5206\\u79BB\\uFF0C\\u83B7\\u53D6\\u3001\\u5904\\u7406\\u3001\\u66F4\\u65B0\\u6570\\u636E\\u4E4B\\u540E\\u518D\\u8C03\\u7528\\u7EAF\\u6E32\\u67D3\\u7EC4\\u4EF6\\u5C55\\u793A\\u3002\\u8FD9\\u4E5F\\u662F\\u6570\\u636E\\u7BA1\\u7406\\u3001\\u72B6\\u6001\\u7BA1\\u7406\\u5C42\\u529F\\u80FD\\u5728 react \\u751A\\u81F3\\u6240\\u6709\\u4E2D\\u5927\\u578B\\u5E94\\u7528\\u7684\\u5F00\\u53D1\\u8FC7\\u7A0B\\u4E2D\\u6709\\u5F88\\u5927\\u5206\\u91CF\\u7684\\u539F\\u56E0\\uFF0C\\u4E5F\\u80FD\\u4ECE\\u903B\\u8F91\\u4E0A\\u66F4\\u597D\\u7684\\u62BD\\u8C61\\u548C\\u590D\\u7528\\u4EE3\\u7801\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u4F18\\u79C0\\u7684\\u56E2\\u961F\\u6CA1\\u90A3\\u4E48\\u591A\\uFF0C\\u66F4\\u6CA1\\u90A3\\u4E48\\u591A\\u9AD8\\u8D28\\u91CF\\u7684\\u4F18\\u96C5\\u5B9E\\u73B0\\uFF0C\\u6570\\u636E\\u7684\\u6D41\\u8F6C\\u548C\\u7EC4\\u4EF6\\u8BBE\\u8BA1\\u5E76\\u6CA1\\u6709\\u90A3\\u4E48\\u8FFD\\u6C42\\u5B8C\\u7F8E\\uFF0C\\u73B0\\u72B6\\u662F\\u5F88\\u591A\\u4E1A\\u52A1\\u4E2D\\u7EC4\\u4EF6\\u7684\\u5B9E\\u8DF5\\u5F88\\u591A\\u53D8\\u6210\\u4E86\\uFF1A\"), mdx(\"h3\", null, \"1.1 \\u72B6\\u6001\\u7BA1\\u7406 -> \\u4E1A\\u52A1\\u81F3\\u4E0A\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \" \\u72B6\\u6001\\u7BA1\\u7406 \"), \" \\u4ECE\\u7EC4\\u4EF6\\u7684\\u6A21\\u5F0F\\u6765\\u8BF4\\uFF0Cclass \\u548C function \\u4EE3\\u8868\\u7740\\u4E24\\u79CD\\u4E0D\\u540C\\u7684\\u5F00\\u53D1\\u4F53\\u9A8C\\uFF0C\\u6309\\u7167\\u6211\\u7684\\u7406\\u89E3\\u5C31\\u662F\\u5E26\\u590D\\u6742\\u72B6\\u6001\\u7BA1\\u7406\\u7684\\u7EC4\\u4EF6\\uFF0C\\u548C\\u7EAF\\u5C55\\u793A\\u578B\\u7EC4\\u4EF6\\u3002\"), mdx(\"p\", null, \"React \\u5C06\\u72B6\\u6001\\u7BA1\\u7406\\u7684\\u65B9\\u6848\\u6254\\u7ED9\\u4E86\\u793E\\u533A\\uFF0C\\u793E\\u533A\\u8BDE\\u751F\\u4E86\\u975E\\u5E38\\u591A\\u7684\\u4F18\\u79C0\\u65B9\\u6848\\uFF0C\\u6BD4\\u5982 Redux\\u3001Mobx \\u7B49\\uFF0C\\u72B6\\u6001\\u5171\\u4EAB\\u548C\\u5206\\u53D1\\u8BA9\\u72B6\\u6001\\u7BA1\\u7406\\u8DB3\\u4EE5\\u6491\\u8D77\\u5927\\u578B\\u5E94\\u7528\\u7684\\u5F00\\u53D1\\u3002\"), mdx(\"p\", null, \"\\u7406\\u60F3\\u5F88\\u4E30\\u6EE1\\uFF0C\\u4F46\\u662F\\u73B0\\u5B9E\\u975E\\u5E38\\u9AA8\\u5E72\\uFF0C\\u6709\\u5F3A\\u8FEB\\u75C7\\u7684\\u5F00\\u53D1\\u8005\\u6CA1\\u90A3\\u4E48\\u591A\\uFF0C\\u4F46\\u662F\\u7740\\u6025\\u50AC\\u4EBA\\u547D\\u7684\\u8001\\u677F\\u5F88\\u591A\\uFF0C\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u5F88\\u591A\\u7684\\u4EA4\\u4E92\\u529F\\u80FD\\u3001\\u6570\\u636E\\u83B7\\u53D6\\u529F\\u80FD\\u90FD\\u4E00\\u80A1\\u8111\\u7684\\u653E\\u5230 class \\u7EC4\\u4EF6\\u91CC\\uFF0C\\u751F\\u547D\\u5468\\u671F\\u5206\\u5272\\u5F00\\u7684\\u5404\\u79CD\\u903B\\u8F91\\u53D8\\u6210\\u4E86\\u4E00\\u56E2\\u9EBB\\uFF0C\\u6CA1\\u6709\\u65F6\\u95F4\\u6216\\u8005\\u521D\\u671F\\u6CA1\\u6CD5\\u53BB\\u5B9E\\u73B0\\u6700\\u4F73\\u5B9E\\u8DF5\\uFF0C\\u540E\\u671F\\u66F4\\u6CA1\\u6CD5\\u62BD\\u8C61\\u66F4\\u7EC6\\u7C92\\u5EA6\\u7684\\u4EE3\\u7801\\u91CD\\u7528\\uFF0C\\u56F4\\u7ED5\\u7740\\u6846\\u67B6\\u7684\\u751F\\u547D\\u5468\\u671F\\u3001state\\u7684\\u5904\\u7406\\u4EE3\\u7801\\u5230\\u5904\\u90FD\\u662F\\u3002\\u5373\\u4F7F function \\u7EC4\\u4EF6\\u7B80\\u5355\\u7EAF\\u7CB9\\uFF0C\\u53EA\\u6709\\u4E00\\u4E2A\\u8F93\\u5165\\u8F93\\u51FA\\uFF0C\\u4F46\\u662F\\u4E00\\u65E6\\u9700\\u6C42\\u53D8\\u66F4\\uFF0C\\u6216\\u8005\\u9700\\u8981\\u4EA4\\u4E92\\uFF0C\\u5F88\\u5FEB\\u5C31\\u5FC5\\u987B\\u6539\\u5199\\u6210 class \\u7C7B\\u578B\\u4E86\\u3002\"), mdx(\"h3\", null, \"1.2 \\u4EE3\\u7801\\u590D\\u7528 -> \\u903B\\u8F91\\u5206\\u5272\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \" \\u4EE3\\u7801\\u590D\\u7528 \"), \" \\u4ECE\\u4EE3\\u7801\\u72B6\\u6001\\u903B\\u8F91\\u590D\\u7528\\u4E0A\\u6765\\u8BF4\\uFF0CHoC \\u9AD8\\u9636\\u7EC4\\u4EF6\\u548C Render props \\u6280\\u672F\\u5F00\\u53D1\\u6A21\\u5F0F\\u4E00\\u822C\\u7528\\u7684\\u6BD4\\u8F83\\u591A\\u3002\"), mdx(\"p\", null, \"\\u53EA\\u6709 class \\u548C function \\u7684\\u4F7F\\u7528\\u4F53\\u9A8C\\uFF0C\\u5F88\\u591A\\u65F6\\u5019\\u5ACC\\u5F03 class \\u7B28\\u91CD\\u3001\\u8BA8\\u538C function \\u6CA1\\u7528\\u7684\\u4F53\\u9A8C\\uFF0C\\u4F46\\u662F\\u6BD5\\u7ADF\\u8FD9\\u51E0\\u79CD\\u5F00\\u53D1\\u6A21\\u5F0F\\u90FD\\u6709\\u72EC\\u7279\\u7684\\u573A\\u666F\\u9700\\u6C42\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u5927\\u90E8\\u5206\\u5F00\\u53D1\\u4EBA\\u5458\\u6CA1\\u529E\\u6CD5\\u505A\\u5230\\u6E32\\u67D3\\u548C\\u72B6\\u6001\\u7684\\u5206\\u79BB\\uFF0C\\u5DE5\\u4F5C\\u73AF\\u5883\\u662F\\u4E1A\\u52A1\\u800C\\u4E0D\\u662F\\u6846\\u67B6\\uFF0C\\u6240\\u4EE5\\u5FEB\\u901F\\u5B9E\\u73B0\\u4E1A\\u52A1\\u7684\\u65F6\\u5019\\uFF0C\\u5F88\\u96BE\\u505A\\u597D\\u4E1A\\u52A1\\u7684\\u68B3\\u7406\\uFF0C\\u5C31\\u51FA\\u73B0\\u4E86\\u5927\\u91CF\\u4F7F\\u7528 class \\u7EC4\\u4EF6\\uFF0C\\u5728\\u751F\\u547D\\u5468\\u671F\\u4E2D\\u505A\\u5F88\\u591A\\u903B\\u8F91\\u5904\\u7406\\u3002\"), mdx(\"p\", null, \"\\u7528\\u5F97\\u591A\\u4E86\\u540E\\u624D\\u53D1\\u73B0\\u5F88\\u591A\\u5730\\u65B9\\u4E5F\\u5E76\\u4E0D\\u5C3D\\u5982\\u4EBA\\u610F\\uFF0C\\u53EF\\u80FD\\u4E5F\\u662F\\u80FD\\u529B\\u95EE\\u9898\\u6216\\u8005\\u6CA1\\u6709\\u65F6\\u95F4\\u6765\\u62BD\\u8C61\\uFF0C\\u6BD4\\u5982 class \\u7EC4\\u5EFA\\u4E2D\\u4E25\\u683C\\u7684\\u751F\\u547D\\u5468\\u671F\\u7ECF\\u5E38\\u628A\\u903B\\u8F91\\u4EE3\\u7801\\u5206\\u5272\\u5F00\\uFF0C\\u6BCF\\u4E2A\\u9636\\u6BB5\\u7684\\u72B6\\u6001\\u903B\\u8F91\\u53D8\\u66F4\\uFF0C\\u590D\\u6742\\u7EC4\\u4EF6\\u4F1A\\u53D8\\u5F97\\u5F88\\u6DF7\\u4E71\\u5F88\\u96BE\\u62C6\\u5206\\u3002function \\u7EC4\\u4EF6\\u7ECF\\u5E38\\u505A\\u7B80\\u5355\\u7EC4\\u4EF6\\uFF0C\\u4F46\\u662F\\u4E00\\u65E6\\u9700\\u6C42\\u53D8\\u66F4\\uFF0C\\u6216\\u8005\\u9700\\u8981\\u4EA4\\u4E92\\uFF0C\\u5F88\\u5FEB\\u5C31\\u5FC5\\u987B\\u6539\\u5199\\u6210 class \\u7C7B\\u578B\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u5176\\u5B9E\\u4E0A\\u9762\\u7684\\u4E0D\\u53CB\\u597D\\u7684\\u5730\\u65B9\\u4E5F\\u4E0D\\u662F\\u90A3\\u4E48\\u5938\\u5F20\\uFF0C\\u4F46\\u662F Hooks \\u51FA\\u73B0\\u786E\\u5B9E\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u53EF\\u80FD\\u66F4\\u597D\\u7684\\u65B9\\u6848\\uFF0C\\u4E1A\\u52A1\\u5C42\\u6709\\u4E86\\u4E00\\u4E2A\\u7075\\u6D3B\\u8FD8\\u53C8\\u5F3A\\u5927\\u7684\\u6A21\\u5F0F\\u3002\"), mdx(\"h2\", null, \"2. Hooks \\u51FA\\u73B0\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Hooks \\u7684\\u51FA\\u73B0\\u8BA9 function \\u7EC4\\u4EF6\\u4ECE\\u6570\\u636E\\u8F93\\u5165\\u5230\\u89C6\\u56FE\\u8F93\\u51FA\\u7684\\u6A21\\u5F0F\\u53D8\\u6210\\u4E86\\u6709\\u72B6\\u6001\\u903B\\u8F91\\u7684\\u7EC4\\u4EF6\\u3002\")), mdx(\"p\", null, \"\\u65E0\\u72B6\\u6001\\u8868\\u73B0\\u662F\\u8F93\\u5165\\u76F8\\u540C\\uFF0C\\u8F93\\u51FA\\u5C31\\u76F8\\u540C\\u3002\\u539F\\u672C\\u7684 function \\u7EC4\\u4EF6\\uFF0C\\u8F93\\u5165\\u53EF\\u4EE5\\u6307 props \\u8F93\\u51FA\\u662F \\u89C6\\u56FE UI\\u3002\\n\\u73B0\\u5728\\u589E\\u52A0 Hooks\\uFF0C\\u5B9E\\u9645\\u4E0A\\u7EC4\\u4EF6\\u5185\\u90E8\\u7EF4\\u62A4\\u4E86\\u4E00\\u4E2A\\u72B6\\u6001\\uFF0C\\u53EF\\u80FD props \\u4E0D\\u4FEE\\u6539\\uFF0C\\u89C6\\u56FE UI \\u4E5F\\u4F1A\\u53D8\\u52A8\\uFF0C\\u4F46\\u662F\\u6BCF\\u6B21\\u4F7F\\u7528\\u76F8\\u540C\\u7684 props \\u6E32\\u67D3\\u51FA\\u6765\\u7684\\u89C6\\u56FEUI\\u8868\\u73B0\\u548C\\u72B6\\u6001\\u90FD\\u662F\\u80FD\\u786E\\u5B9A\\u7684\"), mdx(\"p\", null, \"Hooks \\u7684\\u51FA\\u73B0\\u4E00\\u4E2A\\u662F\\u589E\\u52A0\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D\\u72B6\\u6001\\u7BA1\\u7406\\u7684\\u53EF\\u80FD\\u6027\\uFF0C\\u800C\\u4E14\\u8FD8\\u80FD\\u63D0\\u4F9B\\u4E00\\u4E2A\\u66F4\\u7EC6\\u7C92\\u5EA6\\u7684\\u903B\\u8F91\\u590D\\u7528\\u3002\"), mdx(\"p\", null, \"\\u518D\\u6B21\\u5C06\\u4E0A\\u9762\\u7684\\u4F8B\\u5B50\\u5C01\\u88C5\\u51FA\\u6765\\u7684\\u7ED3\\u679C\\u975E\\u5E38\\u6E05\\u723D\\uFF0C\\u4E0D\\u7528\\u5173\\u5FC3\\u751F\\u547D\\u5468\\u671F\\uFF0C\\u53EA\\u9700\\u8981\\u5173\\u5FC3\\u72B6\\u6001\\u548C\\u6539\\u53D8\\u72B6\\u6001\\u7684\\u884C\\u4E3A\\uFF1A\"), mdx(Demo3, {\n mdxType: \"Demo3\"\n }), mdx(\"h3\", null, \"2.1 \\u5168\\u65B0\\u7684\\u601D\\u7EF4\"), mdx(\"p\", null, \"\\u5728 Hooks \\u53D1\\u5E03\\u7B2C\\u4E00\\u65F6\\u95F4\\u4E4B\\u540E\\uFF0C\\u6211\\u89C9\\u5F97\\u8FD9\\u4E2A\\u5F62\\u5F0F\\u662F\\u7F16\\u7A0B\\u4E60\\u60EF\\u4E0A\\u7684\\u95EE\\u9898\\uFF0C\\u7231\\u7528 Class \\u5C31\\u7528\\uFF0C\\u7231\\u7528 hooks \\u4E5F\\u53EF\\u4EE5\\uFF0C\\u53EA\\u8981\\u4E1A\\u52A1\\u4E2D\\u7EDF\\u4E00\\u5373\\u53EF\\u3002\\u6240\\u4EE5\\u5927\\u6982\\u62FF\\u4E86\\u51E0\\u4E2A class \\u7EC4\\u4EF6\\u8F6C\\u6210 hooks \\u4E4B\\u540E\\uFF0C\\u4E5F\\u6CA1\\u89C9\\u5F97\\u6709\\u4EC0\\u4E48\\u5927\\u4E0D\\u4E86\\u7684\\uFF0C\\u751A\\u81F3\\u8FD8\\u89C9\\u5F97\\u90A3\\u4E9B use-* \\u6709\\u70B9\\u4E0D\\u77E5\\u6240\\u4E91\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u7528\\u7684\\u591A\\u4E86\\u4E4B\\u540E\\u53D1\\u73B0\\uFF0C\\u597D\\u50CF\\u5E76\\u4E0D\\u662F\\u8FD9\\u6837\\u7684\\uFF0Chooks \\u4E0D\\u4EC5\\u4EC5\\u662F\\u5B9E\\u73B0\\u4E86\\u529F\\u80FD\\uFF0C\\u8FD8\\u6084\\u9ED8\\u9ED8\\u7684\\u628A\\u6211\\u5BF9\\u7EC4\\u4EF6\\u7684\\u8BA4\\u77E5\\u6539\\u53D8\\u4E86\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u4E4B\\u524D\"), \" \\u6211\\u4EE5\\u4E3A\\u7684\\u7EC4\\u4EF6\\u662F\\u72B6\\u6001\\u52A0\\u751F\\u547D\\u5468\\u671F\\u7684\\u4FEE\\u6539\\u72B6\\u6001\\uFF0C\\u6709\\u4EC0\\u4E48\\u72B6\\u6001\\u6E32\\u67D3\\u4EC0\\u4E48\\u754C\\u9762\\uFF0C\\u7136\\u540E\\u5728\\u751F\\u547D\\u5468\\u671F\\u4E2D\\u5BF9\\u72B6\\u6001\\u8FDB\\u884C\\u6539\\u53D8\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u73B0\\u5728\"), \" \\u5173\\u5FC3\\u54EA\\u4E9B\\u662F\\u72B6\\u6001\\uFF0C\\u6709\\u54EA\\u4E9B\\u662F\\u526F\\u4F5C\\u7528\\uFF0C\\u6709\\u54EA\\u4E9B\\u662F\\u8BA1\\u7B97\\u548C\\u6E32\\u67D3\\uFF0C\\u4E0D\\u9700\\u8981\\u5173\\u5FC3\\u6211\\u4EC0\\u4E48\\u65F6\\u5019\\u624D\\u80FD\\u505A\\u54EA\\u4E9B\\u4E8B\\u3002\"), mdx(\"h3\", null, \"2.2 \\u6E10\\u5165\\u4F73\\u5883\"), mdx(\"p\", null, \"\\u7406\\u89E3\\u4E86 hooks \\u4E4B\\u540E\\uFF0C\\u5BF9\\u90A3\\u4E9B\\u4EE5 use-* \\u6A21\\u5F0F\\u7684\\u65B9\\u6CD5\\u540D\\u4E5F\\u662F\\u559C\\u6B22\\u5F97\\u7D27\\uFF0C\\u7B80\\u76F4\\u4F20\\u795E\\uFF0C\\u9700\\u8981\\u4EC0\\u4E48\\u6A21\\u5F0F\\u3001\\u529F\\u80FD\\u3001\\u6269\\u5C55\\u3001\\u6570\\u636E\\uFF0C\\u5C01\\u88C5\\u4E00\\u4E2A use \\u65B9\\u6CD5\\uFF0C\\u76F4\\u63A5\\u8C03\\u7528\\u5373\\u53EF\\uFF0C\\u72B6\\u6001\\u548C\\u4FEE\\u6539\\u72B6\\u6001\\u7684\\u65B9\\u6CD5\\u80FD\\u591F\\u62BD\\u8C61\\u7684\\u5F88\\u5E72\\u51C0\\uFF0C\\u5404\\u79CD\\u903B\\u8F91\\u90FD\\u96C6\\u6210\\u5728\\u4E00\\u8D77\\u800C\\u4E0D\\u662F\\u62C6\\u5206\\u5230\\u5404\\u4E2A\\u751F\\u547D\\u5468\\u671F\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u5982\\u6700\\u7B80\\u5355\\u76F4\\u63A5\\u7684\\u5C31\\u662F\\u5728\\u9700\\u8981\\u7B80\\u5355\\u6570\\u636E\\u4EA4\\u4E92\\u7684\\u5730\\u65B9\\u4F7F\\u7528 useState \\u4E86\\uFF1A\"), mdx(\"hr\", {\n style: {\n margin: '20px 0'\n }\n }), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"const View = () => {\\n let [count, setCount] = React.useState(0)\\n return \\n}\\n\")), mdx(CodeWithPreview, {\n withTitle: true,\n preview: mdx(View, {\n mdxType: \"View\"\n }),\n mdxType: \"CodeWithPreview\"\n }), mdx(\"br\", null), mdx(\"br\", null), mdx(\"p\", null, \"\\u7B80\\u5355\\u4E24\\u884C\\u7684\\u51FD\\u6570\\uFF0C\\u5C31\\u53EF\\u4EE5\\u5C01\\u88C5\\u6210\\u539F\\u672C\\u9700\\u8981 class \\u624D\\u80FD\\u5B8C\\u6210\\u7684\\u529F\\u80FD\\u4E86\\uFF0C\\u800C\\u4E14\\u5F88\\u597D\\u7684\\u5C01\\u88C5\\u4E86\\u903B\\u8F91\\u5B9E\\u73B0\\uFF0C\\u5F88\\u597D\\u7528\\uFF0C\\u6BD4\\u5982\\u4F7F\\u7528\\u6211\\u81EA\\u5DF1\\u5C01\\u88C5\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\u6846\\u67B6 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/studio/novus\"\n }, \"novus\"), \"\\uFF1A\"), mdx(CodeWithPreview, {\n column: true,\n codes: [{\n lang: \"ts\",\n code: novus_hooks_novusCodeStr2\n }],\n withTitle: true,\n preview: mdx(ExampleTodoExample, {\n mdxType: \"ExampleTodoExample\"\n }),\n mdxType: \"CodeWithPreview\"\n }), mdx(\"p\", null, \"\\u72B6\\u6001\\u548C\\u6539\\u53D8\\u72B6\\u6001\\u7684\\u884C\\u4E3A\\uFF0C\\u8FD8\\u662F\\u975E\\u5E38\\u6709\\u52A9\\u4E8E\\u7A0B\\u5E8F\\u7684\\u62BD\\u8C61\\u903B\\u8F91\\u7684\\u3002\"), mdx(\"h2\", null, \"4. \\u4ECE useCallback \\u548C deps \\u6765\\u770B\\u4E0D\\u540C\\u7684\\u7EC4\\u4EF6\\u601D\\u7EF4\\u65B9\\u5F0F\\u548C\\u6027\\u80FD\\u4F18\\u5316\\uFF0C\\u4EE5\\u53CA\\u95ED\\u5305\\u7684\\u80FD\\u529B\"), mdx(\"p\", null, \"\\u5148\\u770B\\u4E00\\u4E2A\\u5C0F\\u6817\\u5B50\\uFF1A\"), mdx(CodeWithPreview, {\n codes: [{\n lang: 'jsx',\n code: \"function Counter() {\\n const [count, setCount] = useState(0);\\n useEffect(() => {\\n const id = setInterval(() => {\\n setCount(count + 1); // \\u8FD9\\u4E2A\\u526F\\u4F5C\\u7528\\u8BA1\\u7B97\\u4F9D\\u8D56\\u4E8E count \\u7684\\u503C\\n }, 1000);\\n return () => clearInterval(id);\\n }, []); // \\uD83D\\uDD34 Bug: \\u4F46\\u662F\\u5728\\u5E76\\u6CA1\\u6709\\u8BBE\\u7F6E\\u8FD9\\u4E2A\\u4F9D\\u8D56\\n return
{count}
;\\n}\"\n }],\n withTitle: true,\n column: true,\n preview: mdx(\"div\", null, \"\\u672C\\u5E94\\u8BE5\\u6BCF\\u79D2 +1 \\u7684\\u503C\\uFF1A\", mdx(Counter, {\n mdxType: \"Counter\"\n })),\n mdxType: \"CodeWithPreview\"\n }), mdx(\"p\", null, \"\\u5C0F\\u670B\\u53CB\\u4F60\\u662F\\u5426\\u6709\\u5F88\\u591A\\u95EE\\u53F7\\uFF1F\\u4E3A\\u4EC0\\u4E48\\u754C\\u9762\\u7684\\u503C\\u4E00\\u76F4\\u6CA1\\u6709\\u66F4\\u65B0\\u5462\\uFF1F\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"ps: \\u4E0A\\u9762\\u7684\\u5B9E\\u4F8B\\u4EC5\\u7528\\u6765\\u6F14\\u793A\\u4E3A\\u4EC0\\u4E48\\u8BA1\\u7B97\\u80FD\\u591F\\u88AB\\u7F13\\u5B58\\uFF0CuseCallback \\u4F9D\\u8D56\\u4E8E\\u6BCF\\u6B21\\u53D8\\u66F4\\u7684\\u72B6\\u6001\\u7684\\u8BDD\\uFF0C\\u4E5F\\u6CA1\\u4EC0\\u4E48\\u610F\\u4E49\\uFF0C\\u5F92\\u589E\\u8017\\u65F6\\u3002\")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u539F\\u56E0\\u5728\\u4E8E\\uFF0Ceffect / callback \\u6267\\u884C\\u7684\\u65F6\\u5019\\uFF0C\\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u95ED\\u5305\\uFF0C\\u5185\\u90E8\\u5BF9 state \\u7684\\u8BBF\\u95EE\\u4F9D\\u8D56\\u4E8E\\u95ED\\u5305\\u4E2D\\u521D\\u59CB\\u7684\\u503C 0\\u3002deps \\u53C2\\u6570\\u8868\\u793A\\u6BCF\\u6B21 render \\u7684\\u65F6\\u5019\\u9700\\u8981\\u5224\\u65AD\\u4E0E\\u4E0A\\u6B21\\u7684\\u503C\\u8FDB\\u884C\\u6D45\\u6BD4\\u8F83\\uFF0C\\u5982\\u679C\\u6CA1\\u6709\\u53D8\\u52A8\\u5C31\\u4F1A\\u7F13\\u5B58\\u4E0A\\u6B21\\u7684\\u51FD\\u6570\\uFF0C\\u4E5F\\u5305\\u62EC\\u8FD9\\u4E2A\\u95ED\\u5305\\u5185\\u90E8\\u7684\\u4F20\\u503C\\u5F15\\u7528\\u3002\\u5982\\u679C deps \\u4E3A\\u7A7A\\uFF0C\\u8868\\u793A\\u4E0D\\u4F1A\\u66F4\\u65B0\\u8FD9\\u4E2A\\u95ED\\u5305\\uFF0C\\u5BFC\\u81F4\\u6BCF\\u6B21\\u6267\\u884C\\u51FD\\u6570\\u4E2D\\u7684\\u503C\\u4F1A\\u6C38\\u8FDC\\u662F\\u5F53\\u65F6\\u521D\\u59CB\\u5316\\u7684\\u503C\\u3002\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\"\n }, \"How to read an often-changing value from useCallback?\")), mdx(\"p\", null, \"\\u6B63\\u786E\\u7684\\u505A\\u6CD5\\u5E94\\u8BE5\\u662F\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts{6,9}\"\n }, \"function Counter() {\\n const [count, setCount] = useState(0);\\n\\n useEffect(() => {\\n const id = setInterval(() => {\\n setCount(c => c + 1); // \\u2705 \\u5728\\u8FD9\\u4E0D\\u4F9D\\u8D56\\u4E8E\\u5916\\u90E8\\u7684 `count` \\u53D8\\u91CF\\n }, 1000);\\n return () => clearInterval(id);\\n }, []); // \\u2705 \\u6211\\u4EEC\\u7684 effect \\u4E0D\\u4F7F\\u7528\\u7EC4\\u4EF6\\u4F5C\\u7528\\u57DF\\u4E2D\\u7684\\u4EFB\\u4F55\\u53D8\\u91CF\\uFF0C\\u8868\\u793A\\u53EA\\u4F1A\\u6267\\u884C\\u4E00\\u6B21\\n\\n return

{count}

;\\n}\\n\")), mdx(\"p\", null, \"\\u6240\\u4EE5 hooks \\u5728\\u6BCF\\u6B21\\u66F4\\u7EC6\\u4F60\\u90FD\\u4F1A\\u6267\\u884C\\u7684\\u51FD\\u6570\\u4F53\\u5185\\u600E\\u4E48\\u4FDD\\u5B58\\u72B6\\u6001\\u548C\\u51FD\\u6570\\u7684\\u5462\\uFF1F\\u7B54\\u6848\\u662F\\u4F7F\\u7528\\u4E86\\u95ED\\u5305\\u3002\\u4E0B\\u9762\\u7528\\u975E\\u5E38\\u7B80\\u5355\\u7684\\u5B9E\\u73B0\\u6765\\u6F14\\u793A\\u4E0B\\u4E00\\u4E2A\\u95ED\\u5305\\uFF1A\"), mdx(CodeWithPreview, {\n codes: [{\n lang: 'jsx',\n code: \"let cacheVal\\nfunction useState(initVal){\\n if (!cacheVal) cacheVal = initVal\\n function updateVal(newVal) {\\n cacheVal = newVal\\n }\\n return [cacheVal, updateVal]\\n}\\n\\nlet cacheFunc\\nfunction useEffect(func) {\\n if (!cacheFunc) {\\n cacheFunc = func\\n cacheFunc()\\n }\\n}\\n\\nfunction Counter() {\\n const [count, setCount] = useState(0);\\n useEffect(() => {\\n (() => {\\n setCount(count + 1);\\n })();\\n });\\n return count\\n}\\n\\nconsole.log(Counter()) // 0\\nconsole.log(Counter()) // 1\\nconsole.log(Counter()) // 1\\nconsole.log(Counter()) // 1\\nconsole.log(Counter()) // 1\"\n }],\n withTitle: true,\n mdxType: \"CodeWithPreview\"\n }), mdx(\"p\", null, \"\\u4E5F\\u5C31\\u662F\\u95ED\\u5305\\u5728\\u83B7\\u53D6\\u503C\\u7684\\u65F6\\u5019\\u5DF2\\u7ECF\\u5728\\u4E0A\\u4E0B\\u6587\\u73AF\\u5883\\u4E2D\\u7F13\\u5B58\\u4E86\\u8FD9\\u4E2A\\u503C\\uFF0C\\u518D\\u591A\\u6B21\\u8C03\\u7528\\u4E5F\\u6CA1\\u529E\\u6CD5\\u66F4\\u65B0\\uFF0C\\u8FD9\\u4E5F\\u662F hooks \\u7528\\u6765\\u7F13\\u5B58\\u8BA1\\u7B97\\u63D0\\u5347\\u6027\\u80FD\\u7684\\u4E00\\u4E2A\\u65B9\\u6848\\u3002\"), mdx(\"p\", null, \"\\u66F4\\u591A\\u7684 hooks \\u6027\\u80FD\\u548C react \\u6027\\u80FD\\u8C03\\u4F18\\u53EF\\u4EE5\\u5728\\u53E6\\u4E00\\u7BC7\\u6587\\u7AE0\\u4E2D\\u4E86\\u89E3\\uFF1A\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/react-pratice-and-performance\"\n }, \"\\uD83D\\uDCCA React \\u5B9E\\u8DF5\\u6280\\u5DE7\\u548C\\u6027\\u80FD\\u4F18\\u5316\")), mdx(\"h3\", null, \"\\u95ED\\u5305\\u539F\\u56E0\\u5BFC\\u81F4\\u7684\\u5F88\\u591A\\u5E38\\u89C1\\u95EE\\u9898\\uFF0C\\u5982\\u679C\\u4E0D\\u4E86\\u89E3\\u8FD9\\u4E2A\\u7279\\u6027\\uFF0C\\u6216\\u8005 use-* \\u505A\\u7684\\u5F88\\u590D\\u6742\\u4E4B\\u540E\\u5F88\\u53EF\\u80FD\\u4F1A\\u83AB\\u540D\\u5176\\u5999\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"const useSomeHook = () => {\\n\\n // \\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u72B6\\u6001\\n const [status, setStatus] = useState(false)\\n\\n // \\u5C01\\u88C5\\u7684\\u8BA1\\u7B97\\u903B\\u8F91\\uFF0C\\u91CC\\u9762\\u4F1A\\u4FEE\\u6539\\u72B6\\u6001\\n const someFunc = useCallback(() => {\\n\\n setStatus(!status)\\n\\n // \\u867D\\u7136\\u4E0A\\u9762\\u6709\\u66F4\\u65B0 state \\u503C\\uFF0C\\u4F46\\u662F\\u56E0\\u4E3A\\u6B64\\u5904\\u7684\\u503C\\u5F15\\u7528\\u662F\\u95ED\\u5305\\u4E2D\\u4E0A\\u6B21\\u7684\\u503C\\uFF0C\\u6240\\u4EE5\\u6CA1\\u529E\\u6CD5\\u83B7\\u5F97\\u7ACB\\u5373\\u7684\\u66F4\\u65B0\\u503C\\n // \\u5FC5\\u987B\\u7B49\\u518D\\u6B21\\u8C03\\u7528 someFunc = useCallback(...) \\u624D\\u80FD\\u8FD0\\u884C\\u65B0\\u751F\\u6210\\u7684\\u5305\\u542B\\u66F4\\u65B0\\u503C\\u7684\\u95ED\\u5305\\u51FD\\u6570\\n console.log('status => ', status) // false\\n\\n if(status) console.log('hello world!')\\n else console.log('hello react!') // \\u221A\\n\\n }, [status])\\n\\n useEffect(() => {\\n document.body.addEventListener('click', someFunc, false)\\n return () => {\\n document.body.removeEventListener('click', someFunc, false)\\n }\\n }, []) // \\u6B64\\u5904\\u6CA1\\u6709\\u4F9D\\u8D56\\uFF0C\\u6240\\u4EE5\\u70B9\\u51FB\\u4E8B\\u4EF6\\u6C38\\u8FDC\\u4F7F\\u7528\\u7684\\u662F\\u7B2C\\u4E00\\u6B21\\u7684 someFunc\\uFF0C\\u6240\\u4EE5\\u53EF\\u80FD\\u6C38\\u8FDC\\u4E5F\\u6CA1\\u529E\\u6CD5\\u62FF\\u5230\\u6B63\\u786E\\u7684 state\\uFF0C\\u5BFC\\u81F4\\u5185\\u90E8\\u4F7F\\u7528\\u7684 state \\u548C return \\u8F93\\u51FA\\u7684 state \\u4E0D\\u4E00\\u81F4\\u7684\\u60C5\\u51B5\\n\\n useEffect(() => {\\n\\n console.log(status) // false\\n setStatus(true)\\n console.log(status) // false\\n \\n // class \\u7EC4\\u4EF6\\u4E2D\\uFF0C\\u56E0\\u4E3A setState \\u662F\\u5F02\\u6B65\\u7684\\uFF0C\\u4E00\\u822C setTimeout \\u5728\\u4E0B\\u4E00\\u4E2A EventLoop \\u4E2D\\u80FD\\u591F\\u83B7\\u53D6\\u5230\\u66F4\\u65B0\\u503C\\n // \\u4F46\\u662F\\u8FD9\\u91CC\\u7684 status \\u56E0\\u4E3A\\u4E00\\u76F4\\u5F15\\u7528\\u7684\\u662F\\u95ED\\u5305\\u7684\\u503C\\uFF0C\\u662F\\u4E0D\\u4F1A\\u5728 1s \\u540E\\u66F4\\u65B0\\u7684\\n setTimeout(() => {\\n console.log(status) // false\\n }, 1000);\\n\\n }, [status])\\n\\n const loopFunc = useCallback(() => {\\n for (let i = 0; i < 5; i++) {\\n // \\u6B64\\u5904\\u867D\\u7136 useCallback \\u4F9D\\u8D56\\u4E86 someFunc\\uFF0C\\u4F46\\u662F\\u6BCF\\u6B21\\u5FAA\\u73AF\\u5185\\u90E8\\u90FD\\u662F\\u4F7F\\u7528\\u7684\\u95ED\\u5305\\u503C\\uFF0C\\u7B2C\\u4E00\\u6B21\\u5FAA\\u73AF\\u4E2D setState \\u4E5F\\u6CA1\\u529E\\u6CD5\\u518D\\u7B2C\\u4E8C\\u6B21\\u5FAA\\u73AF\\u5C31\\u770B\\u5230\\u66F4\\u65B0\\u540E\\u7684\\u503C\\n someFunc()\\n }\\n }, [someFunc])\\n\\n // !!!!! \\u5982\\u679C\\u4E00\\u4E2A\\u51FD\\u6570\\u672C\\u8EAB\\u5C31\\u9700\\u8981\\u4F9D\\u8D56\\u4E8E\\u9891\\u7E41\\u53D8\\u52A8\\u7684\\u72B6\\u6001\\uFF0C\\u90A3\\u4E48\\u4F7F\\u7528 use-* \\u4F18\\u5316\\u6027\\u80FD\\u672C\\u8EAB\\u4E5F\\u6CA1\\u529E\\u6CD5\\u505A\\u5230\\uFF0C\\u6700\\u597D\\u662F\\u628A\\u4E0D\\u4F9D\\u8D56\\u72B6\\u6001\\u7684\\u8BA1\\u7B97\\u90E8\\u5206\\u5265\\u79BB\\u5148\\n\\n return [status, someFunc, loopFunc]\\n}\\n\\n\")), mdx(\"h2\", null, \"5. \\u7ED3\\u8BBA\"), mdx(\"hr\", null), mdx(\"p\", null, \"hooks \\u7684\\u601D\\u60F3\\u662F\\u5F00\\u53D1\\u8005\\u4E0D\\u518D\\u9700\\u8981\\u53BB\\u7406\\u6E05\\u6BCF\\u4E00\\u4E2A\\u751F\\u547D\\u5468\\u671F\\u51FD\\u6570\\u7684\\u89E6\\u53D1\\u65F6\\u673A\\uFF0C\\u4EE5\\u53CA\\u5728\\u91CC\\u9762\\u5904\\u7406\\u903B\\u8F91\\u4F1A\\u6709\\u54EA\\u4E9B\\u5F71\\u54CD\\u3002\\u800C\\u662F\\u66F4\\u5173\\u6CE8\\u53BB\\u601D\\u8003\\u54EA\\u4E9B\\u662F\\u72B6\\u6001\\uFF0C\\u54EA\\u4E9B\\u662F\\u526F\\u4F5C\\u7528\\uFF0C\\u54EA\\u4E9B\\u662F\\u9700\\u8981\\u7F13\\u5B58\\u7684\\u590D\\u6742\\u8BA1\\u7B97\\u548C\\u4E0D\\u5FC5\\u8981\\u7684\\u6E32\\u67D3\\u3002\"), mdx(\"p\", null, \"class \\u66F4\\u504F\\u5411\\u7684\\u662F\\u6E05\\u6670\\u5B8C\\u6574\\u7684\\u751F\\u547D\\u5468\\u671F\\uFF0C\\u4E00\\u4E2A\\u7ECF\\u5178\\u7684\\u9762\\u5411\\u5BF9\\u8C61\\u601D\\u60F3\\uFF0C\\u5F3A\\u8C03\\u7684\\u662F\\u65B9\\u6CD5\\u548C\\u5C5E\\u6027\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"E:/u-codes/storybok/content/blog/import-or-require/import-or-require.md","id":"67ef776f-c443-56ae-a98e-64b9664d0f12","parent":{"name":"import-or-require","sourceInstanceName":"blog"},"excerpt":"写代码的时候不能不知其所以然，在现在工程化程度特别高的时代，很多配置都有十分成熟的脚手架工具，一行代码开箱即用的体验。但是这些东西都是辅助的工具箱，我们即将秃顶的艺术家更需要注重基础，不然很多时候项目报错都会让自己不知所措，或者会出现“明明自己弄得没错怎么还是没法运行，一阵鼓捣后有莫名其妙成功运行的奇妙过程”。而应接不暇的工具和框架就像是时代的洪流，你唯一能追的上的是自己解决问题的能力。 谁还记得当前 CMD, AMD, Commonjs…","fields":{"title":"🎁 import 还是 require","slug":"/blog/import-or-require","description":"webpack、node.js、ES5 的模块引用是不一样的，本文了解一下模块化的一些东西，重点说明不同的代码组织方式。","date":"2019-09-03","redirects":null,"datetime":"2019-09-03 16:34:10","categories":["code"],"series":null,"tags":["整理","思考","模块","import","require","CMD","AMD","Webpack","ES5","ES6"],"status":"online"},"frontmatter":{"published":null,"tags":["整理","思考","模块","import","require","CMD","AMD","Webpack","ES5","ES6"],"theme":null,"slug":"import-or-require","date":"2019-09-03 16:34:10"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"import-or-require\",\n \"title\": \"🎁 import 还是 require\",\n \"date\": \"2019-09-03 16:34:10\",\n \"author\": \"Ubug\",\n \"description\": \"webpack、node.js、ES5 的模块引用是不一样的，本文了解一下模块化的一些东西，重点说明不同的代码组织方式。\",\n \"categories\": [\"code\"],\n \"tags\": [\"整理\", \"思考\", \"模块\", \"import\", \"require\", \"CMD\", \"AMD\", \"Webpack\", \"ES5\", \"ES6\"],\n \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u5199\\u4EE3\\u7801\\u7684\\u65F6\\u5019\\u4E0D\\u80FD\\u4E0D\\u77E5\\u5176\\u6240\\u4EE5\\u7136\\uFF0C\\u5728\\u73B0\\u5728\\u5DE5\\u7A0B\\u5316\\u7A0B\\u5EA6\\u7279\\u522B\\u9AD8\\u7684\\u65F6\\u4EE3\\uFF0C\\u5F88\\u591A\\u914D\\u7F6E\\u90FD\\u6709\\u5341\\u5206\\u6210\\u719F\\u7684\\u811A\\u624B\\u67B6\\u5DE5\\u5177\\uFF0C\\u4E00\\u884C\\u4EE3\\u7801\\u5F00\\u7BB1\\u5373\\u7528\\u7684\\u4F53\\u9A8C\\u3002\\u4F46\\u662F\\u8FD9\\u4E9B\\u4E1C\\u897F\\u90FD\\u662F\\u8F85\\u52A9\\u7684\\u5DE5\\u5177\\u7BB1\\uFF0C\\u6211\\u4EEC\\u5373\\u5C06\\u79C3\\u9876\\u7684\\u827A\\u672F\\u5BB6\\u66F4\\u9700\\u8981\\u6CE8\\u91CD\\u57FA\\u7840\\uFF0C\\u4E0D\\u7136\\u5F88\\u591A\\u65F6\\u5019\\u9879\\u76EE\\u62A5\\u9519\\u90FD\\u4F1A\\u8BA9\\u81EA\\u5DF1\\u4E0D\\u77E5\\u6240\\u63AA\\uFF0C\\u6216\\u8005\\u4F1A\\u51FA\\u73B0\\u201C\\u660E\\u660E\\u81EA\\u5DF1\\u5F04\\u5F97\\u6CA1\\u9519\\u600E\\u4E48\\u8FD8\\u662F\\u6CA1\\u6CD5\\u8FD0\\u884C\\uFF0C\\u4E00\\u9635\\u9F13\\u6363\\u540E\\u6709\\u83AB\\u540D\\u5176\\u5999\\u6210\\u529F\\u8FD0\\u884C\\u7684\\u5947\\u5999\\u8FC7\\u7A0B\\u201D\\u3002\\u800C\\u5E94\\u63A5\\u4E0D\\u6687\\u7684\\u5DE5\\u5177\\u548C\\u6846\\u67B6\\u5C31\\u50CF\\u662F\\u65F6\\u4EE3\\u7684\\u6D2A\\u6D41\\uFF0C\\u4F60\\u552F\\u4E00\\u80FD\\u8FFD\\u7684\\u4E0A\\u7684\\u662F\\u81EA\\u5DF1\\u89E3\\u51B3\\u95EE\\u9898\\u7684\\u80FD\\u529B\\u3002\")), mdx(\"hr\", null), mdx(\"p\", null, \"\\u8C01\\u8FD8\\u8BB0\\u5F97\\u5F53\\u524D CMD, AMD, Commonjs \\u8FD8\\u6709\\u8BF4\\u4E0D\\u6E05\\u695A\\u7684\\u4F9D\\u8D56\\u5904\\u7406\\u548C\\u6587\\u4EF6\\u5F15\\u5165\\u800C\\u51FA\\u73B0\\u7684\\u5F88\\u591A\\u6807\\u51C6\\u548C\\u5B9E\\u73B0\\u3002\\u73B0\\u5728\\u521D\\u5B66\\u8005\\u5C0F\\u5E74\\u8F7B\\u4E0A\\u624B\\u5C31\\u662F Vue\\uFF0CReact \\u7B49\\u6846\\u67B6\\uFF0C\\u65E5\\u5E38\\u5F00\\u53D1\\u5C31\\u662F\\u8C03\\u8C03\\u7EC4\\u4EF6\\uFF0C\\u62FC\\u62FC\\u754C\\u9762\\uFF0C\\u5DE6\\u8FB9\\u79FB\\u4E00\\u70B9\\uFF0C\\u989C\\u8272\\u6DF1\\u4E00\\u70B9\\u7684\\u8D44\\u6DF1\\u5F00\\u53D1\\u5DE5\\u7A0B\\u5E08\\uFF0C\\u5177\\u4F53\\u5728\\u4F7F\\u7528\\u8FC7\\u7A0B\\u4E2D\\u5F88\\u591A\\u7684\\u5DE5\\u7A0B\\u5316\\u5B9E\\u8DF5\\u90FD\\u5728 webpack \\u8FD9\\u4E2A\\u9ED1\\u76D2\\u4E2D\\u5904\\u7406\\u4E86\\uFF0C\\u751A\\u81F3 webpack \\u90FD\\u662F\\u522B\\u4EBA\\u914D\\u7F6E\\u597D\\u7684\\uFF0C\\u5BFC\\u81F4\\u751A\\u81F3\\u6709\\u4E9B\\u4EBA\\u4F1A\\u89C9\\u5F97\\u6587\\u4EF6\\u7684\\u5F15\\u7528\\u5C31\\u662F\\u652F\\u6301\\u591A\\u79CD\\u5199\\u6CD5\\u800C\\u5DF2\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"var a = require('./a.js');\\nvar a = require('./a.js').default;\\nimport a from './a';\\nimport { a } from './a';\\nimport { b as a } from './a';\\nimport * as c from './c';\\n\\nmodule.exports = {a: 'A'};\\nexports.a = 'A';\\nexports.default = 'A';\\nexport default 'A';\\nexport const a = 'A';\\n\")), mdx(\"h2\", null, \"\\u4E00\\u3001 \\u8FD9\\u662F\\u4E2A\\u4EC0\\u4E48\\u95EE\\u9898\"), mdx(\"p\", null, \"\\u6D89\\u53CA\\uFF1A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ES5\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ES6\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Node.js\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Babel\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Typescript\"), \"\\u3001\\u8BED\\u6CD5\\u68C0\\u67E5\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Webpack\"), \"\\u3001\\u76F8\\u5173\\u914D\\u7F6E\\u7B49\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"ES5\"), \" \\u4E0B\\u4EC5\\u652F\\u6301\\u8F85\\u52A9\\u51FD\\u6570\\u4E0B\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"AMD\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"CMD\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Commonjs\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"ES6\"), \" \\u652F\\u6301 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"ES5\"), \" \\u7684\\u6A21\\u5757\\u5C01\\u88C5\\uFF0C\\u540C\\u65F6\\u539F\\u751F\\u6DFB\\u52A0\\u4E86\\u6A21\\u5757\\u5316\\u8BED\\u6CD5 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"esModule\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Node.js\"), \" \\u751F\\u6001\\u6BD4\\u8F83\\u65E9\\uFF0C\\u6A21\\u5757\\u7531 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"node\"), \" \\u786E\\u5B9A\\u7EDF\\u4E00\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Commonjs\"), \" \\u8BED\\u6CD5\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"ts\"), \" \\u6587\\u4EF6\\u7684\\u6A21\\u5757\\u5316\\u6CBF\\u7528\\u4E86 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"ES6\"), \" \\u7684\\u6A21\\u5757\\u65B9\\u6CD5\\uFF08\\u4E5F\\u63D0\\u4F9B\\u4E86\\u517C\\u5BB9 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Commonjs\"), \" \\u7684\\u65B9\\u6CD5\\uFF0C\\u4F46\\u662F\\u7528\\u7684\\u5F88\\u5C11\\uFF09\")), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u90FD\\u662F\\u7EDF\\u4E00\\u5E72\\u51C0\\u7684\\u6A21\\u5757\\u5BFC\\u5165\\u5BFC\\u51FA\\uFF0C\\u5982\\u679C\\u6DF7\\u7528\\u5462\\uFF1F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ES6\"), \" \\u80FD\\u591F\\u517C\\u5BB9 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ES5\"), \" \\u7684\\u6A21\\u5757\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u4F46\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ES6\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"TS\"), \" \\u7684\\u6A21\\u5757\\u5982\\u679C\\u8981\\u5728 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ES5\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Node\"), \" \\u73AF\\u5883\\u4E0B\\u4F7F\\u7528\\u5C31\\u9700\\u8981\\u9884\\u7F16\\u8BD1\\u4E86\\u3002\\uFF08\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Node\"), \" \\u7684\\u6A21\\u5757\\u5148\\u4E0D\\u8BF4\\uFF09\"), mdx(\"p\", null, \"\\u9884\\u7F16\\u8BD1\\u7684\\u90E8\\u5206 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Babel\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"tsc\"), \" \\u600E\\u4E48\\u5904\\u7406\\u7684\\uFF1F\"), mdx(\"h3\", null, \"1.1 Babel \\u4E0E webpack \\u7684\\u914D\\u5408\"), mdx(\"p\", null, \"babel \\u9ED8\\u8BA4\\u5C06 esModule \\u8F6C\\u4E3A ES5 \\u7684 Commonjs \\u8BED\\u6CD5 (.babelrc \\u53EF\\u4EE5\\u6307\\u5B9A\\u7F16\\u8BD1\\u6210 esModule)\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// esModule\\nexport default () => {};\\nexport const a = 1;\\nconst b = 2;\\nconst c = 3;\\nexport { b, c };\\n\\n// esModule \\u8F6C\\u6210\\u7684 Commonjs\\nexports.default = function(){}; // \\u8FD9\\u4E5F\\u662F commonjs \\u5F15\\u5165 require('./a').default \\u7684\\u539F\\u56E0\\nexports.a = 1;\\nexports.b = 2;\\nexports.c = 3;\\nexports.__esModule = true;\\n// \\u5C06 export \\u8D4B\\u503C\\u7ED9 exports\\uFF0C\\u5E76\\u5E26\\u4E0A\\u4E00\\u4E2A\\u6807\\u5FD7 __esModule \\u6807\\u5FD7\\u539F\\u672C\\u662F esModule\\n\")), mdx(\"p\", null, \"babel \\u7F16\\u8BD1\\u662F\\u5355\\u6587\\u4EF6\\u7EA7\\u522B\\u7684\\uFF0C\\u591A\\u6587\\u4EF6\\u8054\\u5408\\u8D77\\u6765\\u9700\\u8981\\u63D0\\u4F9B \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"require\"), \"/\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"exports\"), \" \\u7684\\u5B9E\\u73B0\\uFF0C\\u8FD9\\u4E2A\\u662F webpack \\u505A\\u7684\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"__webpack_require__\"), \" \\u76F4\\u63A5\\u53EF\\u4EE5\\u4F7F\\u7528 babel \\u7684\\u7F16\\u8BD1\\u7ED3\\u679C\\uFF0C\\u5E76\\u4E14\\u6253\\u5305\\u5408\\u5E76\\u5168\\u90E8\\u6A21\\u5757\\uFF0C\\u8BA9\\u6574\\u4E2A\\u903B\\u8F91\\u80FD\\u591F\\u8FD0\\u884C\\uFF0C\\u6A21\\u5757\\u7684\\u5904\\u7406\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Babel\"), \" \\u5904\\u7406\\u7684\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u4E0A\\u9762\\u53EA\\u662F\\u8BED\\u6CD5\\u7684\\u8F6C\\u6362\\uFF0C\\u5F15\\u5165\\u7684\\u610F\\u56FE\\u548C\\u8BED\\u6CD5\\u8FD8\\u662F\\u6709\\u5DEE\\u5F02\\u7684\\uFF1A\")), mdx(\"h4\", null, \"1.1.1 Commonjs \\u600E\\u4E48\\u5F15\\u5165\\u539F\\u672C\\u662F esModule \\u7684\\u6A21\\u5757\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// Commonjs \\u5F15\\u5165 esModule \\u7684\\u9ED8\\u8BA4\\u5BFC\\u51FA\\uFF08\\u6BD4\\u8F83\\u7279\\u6B8A\\uFF09\\nvar a = require('./a.js').default\\n\")), mdx(\"p\", null, \"\\u5176\\u4ED6\\u5F15\\u5165\\u65B9\\u5F0F\\u6309\\u7167\\u7F16\\u8BD1\\u540E\\u7684\\u7ED3\\u679C\\u6B63\\u5E38\\u4F7F\\u7528\"), mdx(\"h4\", null, \"1.1.2. esModule \\u65B0\\u8BED\\u6CD5\\u5F15\\u5165 Commonjs\"), mdx(\"p\", null, \"\\u65B0\\u8BED\\u6CD5\\u5F15\\u5165\\u65E7\\u8BED\\u6CD5\\u57FA\\u672C\\u4E0A\\u6309\\u7167\\u4E4B\\u524D\\u7684\\u610F\\u56FE\\uFF0C\\u65B0\\u8BED\\u6CD5\\u7F16\\u8BD1\\u7684 Commonjs \\u600E\\u4E48\\u5F15\\u5165\\u65E7\\u8BED\\u6CD5\\u4E0B\\u7684 Commonjs \\u8BED\\u6CD5\\uFF0C\\u5C24\\u5176\\u5904\\u7406 default\\u3001\\u901A\\u914D\\u7B26\\u548C\\u6790\\u6784\\u5F15\\u5165\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"default \\u95EE\\u9898\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// es6\\u4E0B:\\n// import a from './a.js';\\nfunction _interopRequireDefault(obj) {\\n return obj && obj.__esModule ? obj : { default: obj };\\n}\\n// a.js \\u662F esModule \\u6587\\u4EF6\\u7684\\u8BDD\\u5F15\\u5165\\u7684\\u662F default\\n// a.js \\u662F Commonjs \\u6587\\u4EF6\\u7684\\u8BDD\\u5F15\\u5165\\u7684\\u662F module.exports\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"*\", \" \\u901A\\u914D\\u7B26\\u95EE\\u9898\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// es6 \\u4E0B\\uFF1A\\n// import * as a from './a.js';\\nfunction _interopRequireWildcard(obj) { // \\u7CBE\\u7B80\\n if (obj && obj.__esModule) {\\n return obj;\\n }\\n else {\\n var newObj = {};\\n if (obj != null) {\\n for (var key in obj) {\\n if (Object.prototype.hasOwnProperty.call(obj, key))\\n newObj[key] = obj[key];\\n }\\n }\\n newObj.default = obj;\\n return newObj;\\n }\\n}\\n// a.js \\u662F esModule \\u6587\\u4EF6\\u7684\\u8BDD\\u5F15\\u5165\\u7684\\u662F exports \\u6574\\u4F53\\n// a.js \\u662F Commonjs \\u6587\\u4EF6\\u7684\\u8BDD\\u5F15\\u5165\\u7684\\u662F module.exports \\u518D\\u52A0\\u4E0A\\u4E00\\u4E2A default \\u672C\\u8EAB\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u6790\\u6784\\u5F15\\u5165\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// es6\\u4E0B:\\n// import { a } from './a.js';\\n\\n// \\u8F6C\\u4E3A Commonjs \\u4E0B:\\n// require('./a.js').a\\n\")), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u901A\\u8FC7 babel \\u7684\\u8F85\\u52A9\\u8FD0\\u884C\\u65F6\\u51FD\\u6570\\uFF08transform-runtime \\u63D2\\u4EF6\\uFF09\\uFF0C\\u53EF\\u4EE5\\u5B9E\\u73B0\\u591A\\u79CD\\u89C4\\u8303\\u6A21\\u5757\\u7684\\u4E92\\u76F8\\u5F15\\u7528\\uFF0C\\u5F15\\u7528\\u610F\\u56FE\\u4E5F\\u505A\\u4E86\\u8F6C\\u6362\\u3002\")), mdx(\"h3\", null, \"1.2 tsc \\u7F16\\u8BD1 ts \\u6587\\u4EF6\"), mdx(\"p\", null, \"\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B ts \\u662F\\u4E0D\\u5141\\u8BB8\\u591A\\u79CD\\u89C4\\u8303\\u7684\\u4E92\\u64CD\\u4F5C\\uFF0C\\u4F46\\u662F\\u53EF\\u4EE5\\u4FEE\\u6539\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-json\"\n }, \"// tsconfig.json\\n{\\n // \\u8BED\\u6CD5\\u68C0\\u67E5\\u4E0A\\u5141\\u8BB8\\u6CA1\\u6709 default \\u7684\\u5F15\\u5165\\n \\\"allowSyntheticDefaultImports\\\": true,\\n // es \\u6A21\\u5757\\u4E0E\\u5176\\u4ED6\\u6A21\\u5757\\u7684\\u4E92\\u64CD\\u4F5C\\uFF0C\\u9700\\u6307\\u5B9A module \\u5B57\\u6BB5\\n \\\"esModuleInterop\\\": true,\\n \\\"module\\\": \\\"commonjs\\\",\\n}\\n\")), mdx(\"p\", null, \"\\u914D\\u7F6E\\u4E92\\u64CD\\u4F5C\\u4E4B\\u540E\\uFF0C\\u5F15\\u5165\\u90E8\\u5206\\u53EF\\u4EE5\\u5F15\\u5165 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Commonjs\"), \" \\u89C4\\u8303\\uFF0C\\u5BFC\\u51FA\\u4E5F\\u53EF\\u4EE5\\u5BFC\\u51FA\\u53EF\\u4EE5\\u88AB \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"require\"), \" \\u7684\\u6A21\\u5757\\u3002\\u53EA\\u662F\\u8FD9\\u6837\\u7684\\u8BDD\\u7F16\\u8BD1\\u5B8C\\u6210\\u7684\\u4EE3\\u7801\\u4E2D\\uFF0C\\u5373\\u65F6\\u8BED\\u6CD5\\u76EE\\u6807\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ES6\"), \"\\uFF0C\\u4F46\\u662F\\u6A21\\u5757\\u5173\\u7CFB\\u90FD\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Commonjs\"), \" \\u89C4\\u8303\\u4E86\\u3002\"), mdx(\"h3\", null, \"1.3 \\u4E0D\\u540C\\u5F15\\u7528\"), mdx(\"p\", null, \"\\u4E0B\\u9762\\u7684\\u8BED\\u6CD5\\u573A\\u666F\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"// Commonjs \\u4E2D\\u5F15\\u5165\\u5916\\u90E8\\u6A21\\u5757\\nvar a = require('./a.js');\\n// Commonjs \\u4E2D\\u5F15\\u5165 esModule\\uFF08\\u6BD4\\u5982 Commonjs \\u7684\\u6A21\\u5757\\u5F15\\u5165\\u7B2C\\u4E09\\u65B9 esModule \\u6807\\u51C6\\u7684 npm \\u5305\\uFF09\\nvar a = require('./a.js').default;\\n// esModule \\u4E2D \\u5F15\\u5165 esModule \\u7684 default \\u5BFC\\u51FA\\uFF0C\\u6216\\u8005\\u5F15\\u5165 Commonjs \\u7684 module.exports\\nimport a from './a';\\n// esModule \\u4E2D \\u5F15\\u5165 esModule \\u7684 export a\\uFF0C\\u6216\\u8005\\u5F15\\u5165 Commonjs \\u7684 exports.a\\nimport { a } from './a';\\n// esModule \\u4E2D \\u5F15\\u5165\\u522B\\u540D\\nimport { b as a } from './a';\\n\\n// Commonjs \\u4E2D\\u5BFC\\u51FA\\u9ED8\\u8BA4\\nmodule.exports = {a: 'A'};\\n// Commonjs \\u4E2D\\u5BFC\\u51FA a\\nexports.a = 'A';\\n// Commonjs \\u4E2D\\u5BFC\\u51FA default \\u540D\\u79F0\\nexports.default = 'A';\\n// esModule \\u4E2D\\u5BFC\\u51FA\\u9ED8\\u8BA4\\nexport default 'A';\\n// esModule \\u4E2D\\u5BFC\\u51FA a\\nexport const a = 'A';\\n\")), mdx(\"h2\", null, \"\\u4E8C\\u3001 Webpack \\u7684\\u5904\\u7406\"), mdx(\"p\", null, \"\\u5F88\\u591A\\u4EBA\\u5728\\u4F7F\\u7528 webpack \\u7684\\u65F6\\u5019\\u6CA1\\u6709\\u8003\\u8651\\u8FC7\\u600E\\u4E48\\u4F7F\\u7528 \\u8FD9\\u4E2A\\u52A0\\u8F7D\\u65B9\\u5F0F\\u7684\\u95EE\\u9898\\uFF0C\\u6709\\u4E9B\\u4EBA\\u5199 node \\u6BD4\\u8F83\\u591A\\uFF0C\\u7ECF\\u5E38\\u4F7F\\u7528 require \\u7684\\u65B9\\u5F0F\\u5F15\\u5165\\u4F9D\\u8D56\\uFF0C\\u53E6\\u4E00\\u4E9B\\u4EBA\\u559C\\u6B22\\u4F7F\\u7528\\u6700\\u65B0\\u8BED\\u6CD5\\uFF0C\\u6240\\u4EE5\\u4E00\\u822C\\u90FD\\u662F import from\\uFF0C\\u8FD9\\u4E24\\u79CD\\u65B9\\u5F0F\\u6DF7\\u5199 webpack \\u90FD\\u80FD\\u6B63\\u786E\\u7684\\u6253\\u5305\\u51FA\\u6765\\u3002\"), mdx(\"p\", null, \"\\u9996\\u5148 webpack \\u672C\\u8EAB\\u7B80\\u5355\\u8BF4\\u5C31\\u662F\\u63D0\\u4F9B\\u4E86\\u6587\\u4EF6\\u7684\\u6253\\u5305\\u8FC7\\u7A0B\\uFF0C\\u6574\\u4E2A\\u5904\\u7406\\u8FC7\\u7A0B\\u63D0\\u4F9B\\u751F\\u547D\\u5468\\u671F\\u51FD\\u6570\\uFF0C\\u901A\\u8FC7\\u8FD9\\u4E9B\\u8FC7\\u7A0B\\u94A9\\u5B50\\u63D0\\u4F9B\\u63D2\\u4EF6\\u6CE8\\u518C\\u7684\\u673A\\u5236\\uFF0C\\u7136\\u540E\\u901A\\u8FC7\\u5404\\u79CD loader \\u548C plugin \\u63D0\\u4F9B\\u4E86\\u529F\\u80FD\\u5F3A\\u5927\\u7684\\u529F\\u80FD\\uFF0C\\u5728\\u6BCF\\u4E2A\\u9636\\u6BB5\\u8C03\\u7528\\u63D2\\u4EF6\\u7684\\u65B9\\u6CD5\\u5BF9\\u6587\\u4EF6\\u5185\\u5BB9\\u8FDB\\u884C\\u89E3\\u6790\\uFF0C\\u5904\\u7406\\u540E\\u8F93\\u51FA\\u3002\"), mdx(\"p\", null, \"\\u5176\\u4E2D js \\u6587\\u4EF6\\u7684\\u5904\\u7406\\u9ED8\\u8BA4\\u662F\\u4EA4\\u7531 babel-loader \\u7684\\uFF0C\\u6838\\u5FC3\\u4E5F\\u5C31\\u662F\\u8C03\\u7528 babel \\u8F6C\\u6362\\u6587\\u4EF6\\u6210\\u6807\\u51C6\\u7684\\u6A21\\u5757\\uFF0C\\u6240\\u4EE5\\u65E0\\u8BBA\\u662F ES7\\uFF0CES6\\u90FD\\u662F\\u7EDF\\u4E00\\u8C03\\u7528 babel \\u8FDB\\u884C\\u89E3\\u6790\\uFF0C\\u4ECE\\u5165\\u53E3\\u6587\\u4EF6\\u5F00\\u59CB\\u5206\\u6790\\u4F9D\\u8D56\\u6587\\u4EF6\\uFF0C\\u7136\\u540E\\u628A js \\u6587\\u4EF6\\u6309\\u7167\\u4F9D\\u8D56\\u4E00\\u4E2A\\u4E00\\u4E2A\\u7684\\u89E3\\u6790\\u751F\\u6210\\u6807\\u51C6\\u7684 ES5 \\u6A21\\u5757\\uFF0C\\u800C webpack \\u6240\\u505A\\u7684\\u7B80\\u5355\\u5DE5\\u4F5C\\u5C31\\u662F\\u628A\\u751F\\u6210\\u7684\\u8FD9\\u4E9B\\u6A21\\u5757\\u7EC4\\u5408\\u6210 bundle.js \\u6587\\u4EF6\\uFF0C\\u6700\\u540E\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A require \\u52A0\\u8F7D\\u5668\\u7136\\u540E\\u5C31\\u53EF\\u4EE5\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u8FD0\\u884C\\u4E86\\u3002(\\u5B9E\\u9645 webpack \\u505A\\u7684\\u5DE5\\u4F5C\\u8FDC\\u8FDC\\u590D\\u6742)\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u8BF4\\u767D\\u4E86\\uFF0C\\u8FD9\\u662F Babel \\u5B9E\\u73B0\\u7684\\u8F6C\\u6362\\u8FC7\\u7A0B\\uFF0C\\u5C06 ES6 \\u7684\\u89C4\\u8303\\u8F6C\\u6362\\u6210 ES5 \\u4E5F\\u652F\\u6301\\u7684 Commonjs \\u7684\\u8FC7\\u7A0B\\u800C\\u5DF2\\uFF0C\\u5269\\u4E0B\\u7684\\u5C31\\u662F\\u8BA9 webpack \\u5904\\u7406\\u4E86\\uFF0C\\u800C webpack \\u7B80\\u5355\\u7C97\\u66B4\\u7684\\u628A\\u8FD9\\u4E9B\\u4F9D\\u8D56\\u5168\\u90FD\\u6253\\u5305\\u5230\\u4E00\\u4E2A\\u6587\\u4EF6\\uFF0C\\u89E3\\u51B3\\u4E86\\u5BA2\\u6237\\u7AEF\\u600E\\u4E48\\u5904\\u7406\\u5F02\\u6B65\\u7684\\u95EE\\u9898\\uFF0C\\u90A3\\u5C31\\u662F\\u4E0D\\u8981\\u5F02\\u6B65\\uFF0CCommon.js \\u4E5F\\u5C31\\u80FD\\u6B63\\u5E38\\u8FD0\\u884C\\u4E86\\u3002\\u76F4\\u63A5\\u540E\\u679C\\u5C31\\u662F\\u6253\\u5305\\u540E\\u52A8\\u8F84\\u6570\\u5146\\u7684\\u5DE8\\u5927 js \\u4F53\\u79EF\\uFF0C\\u8FD9\\u4E5F\\u662F webpack \\u521A\\u5F00\\u59CB\\u88AB\\u8BDF\\u75C5\\u5F88\\u591A\\u7684\\u4E00\\u70B9\\uFF0C\\u53CD\\u524D\\u7AEF\\u7684\\u4E1C\\u897F\\uFF0C\\u5C31\\u50CF\\u662F\\u4E00\\u4E2A\\u5927\\u80D6\\u5B50\\u88AB\\u5ACC\\u5F03\\u5230\\u59D4\\u5C48\\u60F3\\u54ED\\u7684\\u6837\\u5B50\\u3002\\u4E0D\\u8FC7\\u8FD9\\u79CD\\u7B80\\u5355\\u7C97\\u66B4\\u7684\\u5F00\\u53D1\\u65B9\\u5F0F\\u6DF1\\u5F97\\u5E7F\\u5927\\u5E95\\u5C42\\u6C11\\u5DE5\\u7684\\u8BA4\\u540C\\uFF0C\\u4E0D\\u5728\\u7EA0\\u7ED3\\u5F02\\u6B65\\u52A0\\u8F7D\\u548C\\u754C\\u9762\\u7684\\u7B49\\u5F85\\u7B49\\u5305\\u88B1\\uFF0C\\u4F18\\u79C0\\u7684\\u5F00\\u53D1\\u4F53\\u9A8C\\uFF0C\\u66F4\\u52A0\\u65B9\\u4FBF\\u7684\\u5728\\u5BA2\\u6237\\u7AEF\\u7EC4\\u7EC7\\u5927\\u578B APP \\u7684\\u5F00\\u53D1\\uFF0C\\u5DF2\\u7ECF\\u8DB3\\u591F\\u8BC1\\u660E\\u8FD9\\u79CD\\u5F00\\u53D1\\u65B9\\u5F0F\\u6709\\u5B58\\u5728\\u7684\\u5FC5\\u8981\\u4E86\\uFF0C\\u66F4\\u4E0D\\u7528\\u8BF4\\u540E\\u9762 webpack \\u9488\\u5BF9\\u4E00\\u4E9B\\u95EE\\u9898\\u8FDB\\u884C\\u7684\\u6539\\u8FDB\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u56DE\\u8FC7\\u5934\\u770B\\u8FD9\\u4E2A\\u95EE\\u9898\\uFF0C\\u4E0B\\u9762\\u8FD9\\u4E2A\\u94FE\\u63A5\\u662F babel \\u7684\\u5728\\u7EBF\\u8F6C\\u6362\\uFF0C\\u53EF\\u4EE5\\u5728\\u5DE6\\u8FB9\\u7F16\\u5199\\u4E0D\\u540C\\u89C4\\u8303\\u7684 js\\uFF0C\\u53F3\\u8FB9\\u4F1A\\u8F6C\\u6210\\u7C7B\\u4F3C\\u5728 webpack \\u4E2D\\u751F\\u6210\\u4EE3\\u7801\\u7684\\u6A21\\u5757\\u7ED3\\u6784\\uFF0C\\u53EF\\u4EE5\\u770B\\u5230 import \\u88AB\\u8F6C\\u6210\\u4E86 require\\uFF0Cbabel \\u5C3D\\u804C\\u7684\\u628A ES6 \\u8F6C\\u6210\\u4E86 ES5\\uFF0C\\u4EFF\\u4F5B\\u8FD8\\u561F\\u54DD\\u4E86\\u4E00\\u53E5\\u53C8\\u4E0D\\u662F\\u4E0D\\u80FD\\u7528\\u3002\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.babeljs.cn/repl/\"\n }, \"babel \\u6D4B\\u8BD5\\u5730\\u5740\")), mdx(\"a\", {\n \"target\": \"_blank\",\n \"href\": \"https://codesandbox.io/s/static-4ed88?fontsize=14\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"src\": \"https://codesandbox.io/static/img/play-codesandbox.svg\"\n })), mdx(\"iframe\", {\n src: \"https://codesandbox.io/embed/babel-require-import-4ed88?fontsize=14\",\n title: \"babel-require-import\",\n allow: \"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media\",\n style: {\n width: '100%',\n height: 500,\n border: 0,\n borderRadius: 4,\n overflow: 'hidden'\n },\n sandbox: \"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"\n }), mdx(\"p\", null, \"\\u603B\\u7ED3\\u4E0B\\u5C31\\u662F\\u8BF4\\u5E76\\u4E0D\\u662F webpack \\u652F\\u6301\\u7684\\u8FD9\\u51E0\\u79CD\\u52A0\\u8F7D\\u6A21\\u5757\\u90FD\\u53EF\\u4EE5\\u63A5\\u53D7\\uFF0C\\u90FD\\u80FD\\u591F\\u517C\\u5BB9\\uFF0C\\u800C\\u662F\\u7531\\u4E8E Babel \\u5728\\u4ECE ES6 \\u8F6C\\u5230 ES5 \\u7684\\u8FC7\\u7A0B\\u4E2D\\uFF0C\\u4F7F\\u7528\\u8BED\\u6CD5\\u8F6C\\u6362\\u7684\\u65B9\\u5F0F\\uFF0C\\u518D\\u52A0\\u4E0A\\u8F85\\u52A9\\u51FD\\u6570\\u7684\\u652F\\u6301\\uFF0C\\u4ECE\\u4E2D\\u95F4\\u5C42\\u517C\\u5BB9\\u4E86\\u591A\\u79CD\\u5199\\u6CD5\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001 \\u6807\\u51C6\\u7684\\u4EA7\\u751F\\u573A\\u666F\\uFF0C\\u600E\\u4E48\\u53BB\\u89E3\\u51B3\\u95EE\\u9898\"), mdx(\"p\", null, \"\\u5F88\\u591A\\u89C4\\u8303\\u548C\\u6807\\u51C6\\u73B0\\u5728\\u5E76\\u4E0D\\u662F\\u8FC7\\u65F6\\u6216\\u8005\\u4E0D\\u80FD\\u7528\\uFF0C\\u90FD\\u662F\\u5341\\u5206\\u4F18\\u79C0\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u90FD\\u6709\\u5341\\u5206\\u5177\\u4F53\\u9002\\u7528\\u7684\\u4F7F\\u7528\\u573A\\u666F\\u3002\"), mdx(\"p\", null, \"\\u672C\\u6765\\u5199\\u4E86\\u5F88\\u591A\\u5173\\u4E8E\\u5404\\u4E2A\\u6807\\u51C6\\u7684\\u6F14\\u8FDB\\u548C\\u5B9E\\u73B0\\uFF0C\\u4F46\\u662F\\u56DE\\u60F3\\u4E86\\u4E00\\u4E0B\\u597D\\u50CF\\u4E0D\\u662F\\u60F3\\u8BF4\\u8FD9\\u4E9B\\uFF0C\\u800C\\u4E14\\u8FD9\\u4E9B\\u968F\\u4FBF\\u627E\\u4E2A\\u535A\\u5BA2\\u4E5F\\u90FD\\u80FD\\u8BF4\\u7684\\u66F4\\u6E05\\u695A\\u3002\\u6240\\u4EE5\\u5148\\u8BF4\\u4E0B\\u51E0\\u4E2A\\u6807\\u51C6\\u662F\\u600E\\u6837\\u7684\\u3002\"), mdx(\"h3\", null, \"1. AMD\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"define([\\\"a\\\", \\\"b\\\"], function(a, b) { \\n\\xA0 \\xA0 b.foo()\\n});\\n\")), mdx(\"p\", null, \"\\u4E00\\u822C\\u4F7F\\u7528 require.js \\u8FD9\\u4E2A\\u5E93\\u6765\\u5904\\u7406\"), mdx(\"h3\", null, \"2. CMD\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"define(function(require, exports, module) {\\n var a = require('./a'); //\\u5728\\u9700\\u8981\\u65F6\\u7533\\u660E\\n a.method_1();\\n exports.add = function() {}\\n});\\n\")), mdx(\"p\", null, \"\\u4E00\\u822C\\u4F7F\\u7528 sea.js \\u8FD9\\u4E2A\\u5E93\\u6765\\u5904\\u7406\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"AMD, CMD \\u662F\\u7528\\u95ED\\u5305\\u7684\\u5F62\\u5F0F\\u9694\\u79BB\\u6A21\\u5757\\uFF0C\\u540C\\u65F6\\u52A0\\u4E0A\\u5F02\\u6B65\\u5904\\u7406\\u6765\\u9002\\u5E94\\u6D4F\\u89C8\\u5668\\u7AEF\")), mdx(\"h3\", null, \"3. Commonjs\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"var math = require('math');\\nexports.result = math.add(2,3);\\n\")), mdx(\"p\", null, \"\\u4E00\\u822C\\u76F4\\u63A5\\u5728\\u540C\\u4E00\\u4E2A\\u6587\\u4EF6\\u4E2D\\uFF0C\\u6216\\u8005 node \\u7AEF\"), mdx(\"h3\", null, \"4. \", mdx(\"strong\", {\n parentName: \"h3\"\n }, \"esModule\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"import defaultExport from \\\"module-name\\\";\\nimport * as name from \\\"module-name\\\";\\nimport { export } from \\\"module-name\\\";\\nimport { export as alias } from \\\"module-name\\\";\\nimport { export1 , export2 } from \\\"module-name\\\";\\nimport { export1 , export2 as alias2 , [...] } from \\\"module-name\\\";\\nimport defaultExport, { export [ , [...] ] } from \\\"module-name\\\";\\nimport defaultExport, * as name from \\\"module-name\\\";\\nimport \\\"module-name\\\";\\n\\nexport { name1, name2, \\u2026, nameN };\\nexport { variable1 as name1, variable2 as name2, \\u2026, nameN };\\nexport let name1, name2, \\u2026, nameN; // also var\\nexport let name1 = \\u2026, name2 = \\u2026, \\u2026, nameN; // also var, const\\nexport function FunctionName() {...}\\nexport class ClassName {...}\\n\\nexport default expression;\\nexport default function (\\u2026) { \\u2026 } // also class, function*\\nexport default function name1(\\u2026) { \\u2026 } // also class, function*\\nexport { name1 as default, \\u2026 };\\n\\nexport * from \\u2026;\\nexport { name1, name2, \\u2026, nameN } from \\u2026;\\nexport { import1 as name1, import2 as name2, \\u2026, nameN } from \\u2026;\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"ECMAScript2015 \"), \"\\u89C4\\u5B9A\\u4E86 Javascript \\u7684\\u6807\\u51C6\\uFF0C\\u53C9\\u7740\\u8170\\u7B49\\u7740\\u522B\\u4EBA\\u6539\\u6210\\u81EA\\u5DF1\\u7684\\u89C4\\u8303\\u3002\"), mdx(\"p\", null, \"\\u73B0\\u5728\\u5927\\u90E8\\u5206\\u90FD\\u662F\\u9884\\u7F16\\u8BD1\\u5DE5\\u5177\\uFF0C\\u6240\\u4EE5\\u5E38\\u5E38\\u6253\\u4EA4\\u9053\\u7684\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Commonjs\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"esModule\")), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u4EE5\\u4E0A\\u80FD\\u770B\\u5230\\u524D\\u7AEF\\u7684\\u5F88\\u591A\\u5DE5\\u7A0B\\u5316\\u65B9\\u6848\\u591A\\u4E48\\u53D7\\u5230\\u6D4F\\u89C8\\u5668\\u8FD9\\u6837\\u7684\\u7F51\\u7EDC\\u534F\\u8BAE\\u9A71\\u52A8\\u5E94\\u7528\\u7684\\u9650\\u5236\")), mdx(\"h2\", null, \"\\u56DB\\u3001 \\u8BF4\\u4E86\\u8FD9\\u4E48\\u591A\"), mdx(\"p\", null, \"\\u5176\\u5B9E\\u6700\\u91CD\\u8981\\u7684\\u60F3\\u8BF4\\uFF0C\\u5199\\u4EE3\\u7801\\u7684\\u65F6\\u5019\\u4E0D\\u80FD\\u4E0D\\u77E5\\u5176\\u6240\\u4EE5\\u7136\\uFF0C\\u5728\\u73B0\\u5728\\u5DE5\\u7A0B\\u5316\\u7A0B\\u5EA6\\u7279\\u522B\\u9AD8\\u7684\\u65F6\\u4EE3\\uFF0C\\u5F88\\u591A\\u914D\\u7F6E\\u90FD\\u6709\\u5341\\u5206\\u6210\\u719F\\u7684\\u811A\\u624B\\u67B6\\u5DE5\\u5177\\uFF0C\\u4E00\\u884C\\u4EE3\\u7801\\u5F00\\u7BB1\\u5373\\u7528\\u7684\\u4F53\\u9A8C\\u3002\\u4F46\\u662F\\u8FD9\\u4E9B\\u4E1C\\u897F\\u90FD\\u662F\\u8F85\\u52A9\\u7684\\u5DE5\\u5177\\u7BB1\\uFF0C\\u6211\\u4EEC\\u5373\\u5C06\\u79C3\\u9876\\u7684\\u827A\\u672F\\u5BB6\\u66F4\\u9700\\u8981\\u6CE8\\u91CD\\u57FA\\u7840\\uFF0C\\u4E0D\\u7136\\u5F88\\u591A\\u65F6\\u5019\\u9879\\u76EE\\u62A5\\u9519\\u90FD\\u4F1A\\u8BA9\\u81EA\\u5DF1\\u4E0D\\u77E5\\u6240\\u63AA\\uFF0C\\u6216\\u8005\\u4F1A\\u51FA\\u73B0\\u201C\\u660E\\u660E\\u81EA\\u5DF1\\u5F04\\u5F97\\u6CA1\\u9519\\u600E\\u4E48\\u8FD8\\u662F\\u6CA1\\u6CD5\\u8FD0\\u884C\\uFF0C\\u4E00\\u9635\\u9F13\\u6363\\u540E\\u6709\\u83AB\\u540D\\u5176\\u5999\\u6210\\u529F\\u8FD0\\u884C\\u7684\\u5947\\u5999\\u8FC7\\u7A0B\\u201D\\u3002\\u800C\\u5E94\\u63A5\\u4E0D\\u6687\\u7684\\u5DE5\\u5177\\u548C\\u6846\\u67B6\\u5C31\\u50CF\\u662F\\u65F6\\u4EE3\\u7684\\u6D2A\\u6D41\\uFF0C\\u4F60\\u552F\\u4E00\\u80FD\\u8FFD\\u7684\\u4E0A\\u7684\\u662F\\u81EA\\u5DF1\\u89E3\\u51B3\\u95EE\\u9898\\u7684\\u80FD\\u529B\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}